javascript - 仅在必要时分词

Question

我需要通过 CSS 完成以下任务：
我有一个固定宽度的 div。
在这个 div 中，我需要按以下方式显示名字、第二个名字以及最终的其他名字。

示例 1

---------------
First-Name 
Secondo-Name
---------------

示例 2

---------------
Very-Long-First
-Name 
Second-Name
---------------

如果我尝试使用word-break: break-all; 它，它将适用于example 2但不适用于example 1which 将是：

示例 1

---------------
First-Name Seco
nd-Name
---------------

仅使用 CSS 解决此问题的最佳方法是什么？
如果不可能，使用javascript修复它的最佳方法是什么？

score 8 · Accepted Answer

如果单词的宽度超过的宽度，我使用word-wrap: break-word它来允许名称被中断div，否则它将在名称之间中断。我想这就是你正在寻找的东西。

score 2 · Accepted Answer

对于很长的名字，我认为在下面的行中打断显示它的单词不是一个好主意。
我建议你使用 css 属性-moz-hyphens: auto。
这是参考css-hyphenation。

2 回答 2