css - 使居中对齐的文本优先于底部文本行

Question

我想知道是否可以选择优先显示居中的文本行。

通常带有 text-align:center 的句子会将文本换行，以便第一行始终是两行中最宽的。

是否可以将文本换行使文本的底行最长/最宽？

例如，包含 5 个相同单词的段落在文本的顶行有 2 个，在底行有 3 个。

提前致谢。

代码引用:

<p style="text-align:center;">word word word word word</p>

在某些宽度下，当句子换行时，句子会像这样折叠:

word word word
word word

我希望它像这样折叠:

word word
word word word

我知道我可以用不同的 p、span 或任何元素来包装句子。我只是好奇是否有针对这种自动换行的 css 解决方案。

Answer 1

在我看来，最简单的解决方案是使用两个单独的 <p>标签(或您选择的任何文本元素)并独立调整每个标签的水平填充。

例如，标记为:

<p>Lorem ipsum</p>
<p>Lorem ipsum dolor</p>

以及对应的CSS:

p:first-of-type {
    text-align: center;
    padding: 16px 32px;
}

p:last-of-type {
    text-align: center;
    padding: 16px 16px;
}