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

就我而言，

    word-break: break-all;

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

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

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

理论上当然是P

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

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

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