最好的解决方案是字间距属性。

将<p>添加到一个特定大小的容器中(例如300px)，然后在word-spacing中添加该大小的值。

HTML

<div>
 <p>Sentence Here</p>
</div>

CSS

div {
 width: 300px;
}

p {
 width: auto;
 text-align: center;
 word-spacing: 300px;
}

这样，你的句子就会被分解成一列，但是段落的结尾是动态的。

这里有一个Codepen的例子

如果你想从不同的解决方案中进行选择，除了给出的答案之外……

另一种方法是将容器宽度设置为0，并确保溢出是可见的。然后每一个字就会从里面溢出来，成为自己的一行。

div { 宽度:0; 溢出:可见; ｝ < div >短字< / div > <人力资源> < div >庞大的词< / div >

或者您可以使用这些新提出的宽度值之一，前提是在您阅读本文时这些值仍然存在。

div { 宽度:min-intrinsic;/*旧Chrome, Safari */ 宽度:-webkit-min-content;/*少旧Chrome, Safari */ 宽度:-moz-min-content;/*当前Firefox */ 宽度:min-content;/*当前Chrome, Safari;而不是IE或Edge */ ｝ < div >短字< / div > <人力资源> < div >庞大的词< / div >

<span>是一个内联元素，我添加了一个display: inline-block来给元素max-width: min-content;， min-content是文本/句子中最小单词的值/宽度。

如果使用min-content，“width”将是最长的单词。在这种情况下，例子是你的长单词。但如果你有不同的单词，比如and if或一些2/3字符的单词，那么这些单词将适合在同一行。

如果你想保持文字的行为，你可以给一个固定的宽度，例如5px。

在CodePen中查看更多示例。

.wrapWord { 显示:inline-block; max-width: min-content; ｝ < div > < span class = " wrapWord”> 例词 < / span > < / div >

另一种解决方案在“每行一个词的句子”中描述，通过应用display:table-标题;完美到极致

@HursVanBloob给出的答案仅适用于固定宽度的父容器，但不适用于流体宽度的容器。

我尝试了很多属性，但没有一个像预期的那样工作。最后，我得出了一个结论，赋予字间距一个非常大的值是完美的。

p { word-spacing: 9999999px; }

或者，对于现代浏览器，您可以使用CSS vw单位(可视宽度占屏幕大小的%)。

p { word-spacing: 100vw; }

https://jsfiddle.net/bm3Lfcod/1/

对于那些寻求在一个灵活的父容器中工作的解决方案，并且在两个维度上都是灵活的子容器。如。导航按钮。

//the parent (example of what it may be)
div {
  display:flex;
  width: 100%;
}

//The children
a {
  display: inline-block;
}

//text wrapper
span {
  display: table-caption;
}