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

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

p { word-spacing: 9999999px; }

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

p { word-spacing: 100vw; }

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

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

p { word-spacing: 9999999px; }

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

p { word-spacing: 100vw; }

尝试使用空白:pre-line;。它在代码中出现换行符的地方创建换行符，但忽略额外的空格(制表符和空格等)。

首先，在代码中把单词写在不同的行上:

<div>Short
Word</div>

然后将样式应用到包含单词的元素。

div { white-space: pre-line; }

但是要注意，元素内部代码中的每一个换行符都会创建一个换行符。所以写下面的句子会导致在第一个单词之前和最后一个单词之后多一个换行符:

<div>
    Short
    Word
</div>

有一篇关于CSS技巧的很棒的文章解释了其他空白属性。

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

将<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的例子

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

Use

.one-word-per-line {
    word-spacing: <parent-width>; 
}

.your-classname{
    width: min-intrinsic;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    display: table-caption;
    display: -ms-grid;
    -ms-grid-columns: min-content;
}

其中<parent-width>是父元素的宽度(或不适合一行的任意高值)。这样可以确保在单个字母之后甚至有换行符。适用于Chrome/FF/Opera/IE7+(甚至可能是IE6，因为它也支持字间距)。