уль колонка 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>

перенос слов: брейк-слово

Указывает, что обычно бьются слова могут быть разбиты на произвольных точках, если нет иного приемлемых точек разрыва в линия.

Ссылка: 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; 
}