如何使用CSS为段落中指定句子设置样式且不产生换行

问题原因 #

你出现跳行问题的核心原因是用了默认带有display: block属性的块级元素（比如<div>、<p>等）包裹目标文本，块级元素默认会占据整行宽度，自然会触发换行。

可行解决办法 #

用默认行内属性的<span>标签包裹目标文本即可，<span>本身不会改变文本的排版流式布局，完全满足你保留在原行不换行的需求。

改造后的HTML代码 #

<p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs. <span class="frame-price">Starting at $2.00 / frame.</span></p>

对应CSS样式示例 #

你可以给自定义的类名加任意你需要的样式，修改颜色、字号、加粗等效果都不会影响原有换行逻辑：

.frame-price {
  color: #ff4d4f;
  font-weight: 700;
  /* 此处可添加其他你需要的样式规则 */
}

特殊情况兼容方案 #

如果你出于业务需求没办法把包裹元素改成<span>，也可以手动给包裹元素强制设置行内属性，一样可以解决换行问题：

.你的包裹元素类名 {
  display: inline;
  /* 如果需要同时支持设置上下边距、宽高等块级属性，也可以用display: inline-block，同样不会触发换行 */
}

内容的提问来源于stack exchange，提问作者Nima Zarei