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

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

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

p { word-spacing: 9999999px; }

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

p { word-spacing: 100vw; }

就我而言，

    word-break: break-all;

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

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

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>