仅用CSS实现文本首行加粗居中、其余行两端对齐的方法？

嘿，我完全懂你的痛点！想不用JS就实现「首行加粗居中，其余行两端对齐」，但现有CSS要么把首行也搞成两端对齐，要么让所有折行都居中，确实踩坑了。

先说说你当前代码的问题：text-align-last: center是个“全局”设置——它会让整个块级元素的最后一行都居中，而不是只针对首行；同时text-align: justify又会强制所有行（包括首行）两端对齐，这俩属性在同一个元素上自然会打架。

给你两个靠谱的解决方案，看你能不能微调HTML结构来选：

方案1：微调HTML结构（最稳妥，无兼容性问题） #

把首行单独用一个行内块/块级元素包起来，这样就能彻底分离首行和其余内容的样式：

<div id="data">
  <span class="first-line">这是需要加粗居中的首行内容</span>
  这是其余需要两端对齐的内容，随便写多少字都没问题，换行也不会影响效果。这是其余需要两端对齐的内容，随便写多少字都没问题，换行也不会影响效果。
</div>

对应的CSS：

#data {
  text-align: justify;
  white-space: pre-line; /* 保留你的换行设置 */
}

.first-line {
  display: block; /* 让首行单独占一行 */
  font-weight: bold;
  text-align: center;
  margin-bottom: 0.5em; /* 可选，和下面内容拉开点距离更美观 */
}

这个方法完全不会有冲突，不管首行内容长短，都能稳稳居中加粗，其余内容老老实实两端对齐。

方案2：纯CSS（不修改HTML，适合首行是明确单独一行的情况） #

如果你没法改HTML，且首行是通过换行符（\n）明确分开的（因为你用了white-space: pre-line，换行符会生效），可以去掉text-align-last: center，直接给::first-line设置样式：

#data {
  white-space: pre-line;
  text-align: justify; /* 其余行两端对齐 */
}

#data::first-line {
  font-weight: bold;
  text-align: center; /* 首行居中 */
}

⚠️ 注意：这个方法的局限性是——如果首行内容太长自动折行（不是手动换行），那视觉上的第二行（折行部分）会变成两端对齐，而不是跟着首行居中。所以如果你的首行是短文本、不会自动折行，这个方法完全ok；如果首行可能很长，还是方案1更靠谱。

试试这两种方法，应该就能解决你的问题啦！

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