css - 字段集中列表中的 CSS 列数不会断词

Question

column-list 可以很好地工作，而不是自动换行。

<fieldset>
    <ul>
        <li><a href="#">foo</a> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
        <li>bbbbbb</li>
        <li>ccccccc</li>
        <li>aaaaaaaa</li>
        <li><a href="#">foo</a>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
    </ul>
</fieldset>

ul {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}

ul li{
 word-wrap: break-word;
}

测试：http: //jsfiddle.net/jbe07sbs/1/

在 Chrome 中测试 39.0.2171.71 m

相关：字段集的列计数不适用于 Firefox

Answer 1

演示 - http://jsfiddle.net/jbe07sbs/2/

ul li {
  word-wrap: break-word;
  word-break: break-all; /** adding this will fix **/
}

断字：break-all

无论是连续单词还是多个单词，都在宽度限制的边缘将它们分解。（即即使在同一个单词的字符内）