ul li列重叠[html和css]

Question

我使用<ul>代码和<li>代码列出我的数据：

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

ul.listbook li{

}

<ul class="listbook">
  <li>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
  <li>bbbbbb</li>
  <li>ccccccc</li>
  <li>aaaaaaaa</li>
  <li>aaaaaaaa</li>
  <li>aaaaaaaa</li>
  <li>aaaaaaaa</li>
  <li>aaaaaaaa</li>
  <li>aaaaaaaa</li>
  <li>aaaaaaaa</li>
  ...
</ul>

结果是：

第一个孩子的单词是重叠第二列。 我该怎么办？

Answer 1

添加word-wrap: break-word将解决包装问题。

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

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

<ul class="listbook">
    <li>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
    <li>bbbbbb</li>
    <li>ccccccc</li>
    <li>aaaaaaaa</li>
    <li>aaaaaaaa</li>
    <li>aaaaaaaa</li>
    <li>aaaaaaaa</li>
    <li>aaaaaaaa</li>
    <li>aaaaaaaa</li>
    <li>aaaaaaaa</li>
    ...
</ul>

  

自动换行：break-word

     

表示通常牢不可破的单词可能会被破坏   如果没有其他可接受的断点，则为任意点   这条线。

参考：word-wrap

Answer 2

使用word-wrap: break-word：

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

Answer 3

CSS

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

试试这个

Answer 4

如果你想切断单词而不是破坏，请使用：

ul.listbook li{
  overflow: hidden;
  position: relative;
}