css 一行文字 不同字体颜色

### 使用 CSS 实现同一行文本内的多种字体颜色

对于在同一行文本内应用不同部分的不同字体颜色，有几种方法可以实现这一效果。下面介绍一种基于 HTML 和 CSS 的简单而有效的方式。

#### 方法一：HTML 结构配合 `span` 标签
通过将需要着色的文字片段包裹在 `<span>` 或其他合适的内联标签中，并分别为这些标签定义样式来达到目的。这种方式直观易懂，易于维护和修改。

<p>
    这里是正常文字<span style="color:red;">红色强调词</span>继续正常文字。
</p>

这种方法允许精确控制哪些单词或短语应该被赋予特定的颜色，同时也保持了良好的可读性和结构化文档的优点[^4]。

#### 方法二：利用伪元素与 ::before / ::after
如果只是想要给某个元素的内容前后添加带有特殊颜色的装饰性文本，则可以通过伪元素完成：

.special::before {
  content: "注意!";
  color: orange;
}

.special::after {
  content: "!重要";
  color: blue;
}

此技术适合于不需要改变原有DOM树的情况下增加额外的信息提示或是视觉增强[^1]。

#### 方法三：Flexbox 布局技巧处理复杂情况
当面对更复杂的场景比如两个区域共享一行但是又希望其中一个尽可能占据更多空间直到另一个可见时，可以考虑采用 Flexbox 解决方案。这里的关键在于合理配置子项之间的伸缩比例(`flex-grow`, `flex-shrink`)以确保布局行为符合预期。

.container {
  display: flex;
}

.fixed-width {
  white-space: nowrap; /* 防止换行 */
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80%;      /* 可选的最大宽度限制 */
  flex-shrink: 0;     /* 不缩小 */
}

.flexible-content {
  margin-left: auto;   /* 推到最右边 */
  color: green;
}

上述代码展示了如何创建一个容器，在其中左侧固定宽度的部分会优先显示其全部内容而不发生收缩，右侧灵活调整大小的部分则会被推至末端并呈现为指定颜色。