当且仅当下一行没有足够空间容纳整个单词时，使用 CSS 强制使用连字符进行分词

【问题标题】：Force word-break with hyphens with CSS if and only if there isn't enough room for the whole word on the next line当且仅当下一行没有足够空间容纳整个单词时，使用 CSS 强制使用连字符进行分词
【发布时间】：2021-01-17 15:24:24
【问题描述】：

不确定我的措辞是否正确。

现在我正在使用以下 CSS 将网页上的长字连字符连接起来，效果很好：

overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

但是，我想要的是有一个回退，如果下一个单词可以适合该行，则尝试将整个单词（以及后续单词）推到下一行，而不是在我的容器的边缘，无论长度如何。

基本上是这样的：

-----------
快 br-
自己的狐狸跳 ov-
呃，懒狗
Somereallyrdic-
好长的词
----------------------

我想要的是：

-----------
快速
棕狐跳跃
在懒惰
狗
Somereallyrdic-
好长的词
----------------------

这可以通过 CSS 实现吗？

【问题讨论】：

您是否应用了其他 CSS，或者您使用的是什么浏览器？如果我在 Chrome 中尝试您的代码，我会得到您想要的示例（即只有很长的分词），但没有连字符。

标签： css

【解决方案1】：

可以使用 html &shy;。不幸的是，它不能读心 - 硬代码是必要的。
在任何你让一个单词中断的地方，把&shy; 放在没有空格的地方——它在 html 中是不可见的。如果这个词不合适 - 此时它将与一个很好的 hyphen 中断。
（我不知道您的示例中的 - 来自哪里 - 我的浏览器坏了）

word-wrap、word-break 和 hyphens 对于长链接很有用（但不完全支持）。如果需要，您可以使用组合

p{ width: 100px; border: 1px solid red; margin: 0 50px; display: inline-block}

<p>The quick brown fox jumps over the lazy dog. Somereally&shy;ridicoulosly long word</p>

<p><b>This_one_is_without_shy</b> Auxerunt&shy;haec&shy;vulgi&shy;sordidioris&shy;audaciam, quod&shy;cum&shy;ingravesceret&shy;penuria </span>

【讨论】：