使用tachyons.io框架实现单词斜体强调且不换行的问题
Hey there! I totally get the frustration of trying to style a single word in a sentence without messing up the flow—let's sort this out quickly.
The core issue here is that <p> is a block-level HTML element, which by default forces a line break before and after itself. That's why even nesting a <p class="i"> inside your sentence is causing unwanted breaks, regardless of Tachyons' styles.
The Simple Fix: Use a <span> Element
Instead of using <p>, wrap the word you want to italicize in a <span> tag with the i class. Since <span> is an inline element, it won't break your sentence at all:
This is a sentence where I want to <span class="i">emphasize</span> a single word without line breaks.
Why Your Previous Attempts Didn't Work
- Inline
<p class="i">: As mentioned,<p>is block-level, so it will always create line breaks—this is standard HTML behavior, not a Tachyons quirk. - Directly adding
class="i"to text: Classes can only be applied to HTML elements, not raw text nodes. You need an inline container (like<span>) to hold the class and target the specific word.
If you prefer semantic markup, you can also use <em> (which is also inline) with the i class, though Tachyons' i class will override any default browser styling for <em> if needed:
This is a <em class="i">semantically emphasized</em> word in a sentence.
Either approach will keep your sentence flowing smoothly while applying the italic style from Tachyons.
内容的提问来源于stack exchange，提问作者Adam Matan
