javascript - 仅在必要时使用连字符以防止容器溢出

Question

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

如果我使用­这种情况：

For exam-|
ple      |

当我真的想要这个时：

For      |
example  |

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

For |
exa-|
mple|

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

For |
exam|
ple |

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

解决方案：

如果你在一个<span>带有字符display: inline-block的单词周围加上一个 with &shy，它将防止它跨行，直到它必须

Answer 1

查看 css 的“自动换行”属性（http://www.w3schools.com/cssref/css3_pr_word-wrap.asp），

word-wrap: break-word;

应该这样做。

Answer 2

如果你在一个<span>带有字符display: inline-block的单词周围加上一个 with ­，它将防止它跨行，直到它必须