你不能针对CSS中的每个单词。但是，使用一点jQuery就可以做到。

使用jQuery，您可以将每个单词包装在<span>中，然后CSS设置span为display:块，这将把它放在自己的行上。

理论上当然是P

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

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

另一种方法是将容器宽度设置为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 >

你不能针对CSS中的每个单词。但是，使用一点jQuery就可以做到。

使用jQuery，您可以将每个单词包装在<span>中，然后CSS设置span为display:块，这将把它放在自己的行上。

理论上当然是P

就我而言，

    word-break: break-all;

工作得很好，希望对其他像我一样的新人有所帮助。

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

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

<div>Short
Word</div>

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

div { white-space: pre-line; }

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

<div>
    Short
    Word
</div>

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