仅在必要时连接文本以防止容器溢出

Question

只有当单词比容器宽时，才想将连字符插入单词。

如果我使用­，则会发生这种情况：

For exam-|
ple      |

我真的想要这个：

For      |
example  |

对于狭窄的容器我想要这个：

For |
exa-|
mple|

word-wrap: break-word;给出了所需的行为，但没有连字符。

For |
exam|
ple |

根据我的研究，目前CSS似乎无法做到这一点。

解决方案：

如果你在一个带有<span>字符的单词周围放置一个带有display: inline-block的{​​{1}}，它就会阻止它跨行，直到它必须

Answer 1

了解css＆＃34;自动换行＆＃34; property（http://www.w3schools.com/cssref/css3_pr_word-wrap.asp），

word-wrap: break-word;

应该这样做。

Answer 2

如果你在一个带有<span>字符的单词周围放置一个带有display: inline-block的{​​{1}}，它就会阻止它跨行，直到它必须