我在一个项目中这样做，客户希望在不同的行上有3个单词的标题。基本上你用CSS增加空间，使用空白来分隔行。

词间距:9999 px; 空白:pre-line;

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;
}

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

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

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，因为它也支持字间距)。

我也遇到了同样的问题，但这里的选择都帮不了我。某些邮件服务不支持指定的样式。 以下是我的版本，它解决了这个问题，并且在我检查的任何地方都有效:

<table>
    <tr>
        <td width="1">Gargantuan Word</td>
    </tr>
</table>

或使用CSS:

<table>
    <tr>
        <td style="width:1px">Gargantuan Word</td>
    </tr>
</table>