'word wrapping' on li, а не отдельные слова

Question

Я генерирую список тегов (в формате ul/), что я хотел бы, чтобы разрыв строки происходил на li, а не на отдельных словах или персонажах внутри li.

Единственная команда CSS, что я нашел, чтобы сделать что-нибудь до сих пор было word-break, где, если это break-all он сломается после любого символа, normal (или что-нибудь другое, что будет по умолчанию normal) имеет это нарушение после пробела или тире -

Fiddle

Мой CSS выглядит следующим образом в настоящее время:

li { 
    display: inline; 
    line-height: 24px !important; 
    border: 1px solid black; 
    word-break: normal; 
} 

Answer 1

Если я правильно понял, вы дзю го необходимо установить li в display:inline-block

li { 
 
    display: inline-block; 
 
    line-height: 24px; 
 
    border: 1px solid black; 
 
}

<ul> 
 
    <li>This longword tag One</li> 
 
    <li>This longword tag Two</li> 
 
    <li>ThislongwordtagThree</li> 
 
    <li>This longword tag Four</li> 
 
    <li>This longword tag Five</li> 
 
    <li>This longword tag Six</li> 
 
    <li>This longword tag Seven</li> 
 
</ul> 
 
<ul> 
 
    <li>This longword tag One</li> 
 
    <li>This longword tag Two</li> 
 
    <li>ThislongwordtagThree</li> 
 
    <li>This longword tag Four</li> 
 
    <li>This longword tag Five</li> 
 
    <li>This longword tag Six</li> 
 
    <li>This longword tag Seven</li> 
 
</ul>

Answer 2

Если я правильно понимаю, что вам нужно, просто добавив

white-space: nowrap; 

к вашему li правило будет делать трюк:

li { 
    display: inline; 
    line-height: 24px !important; 
    border: 1px solid black; 
    white-space: nowrap; 
} 

Here's the jsfiddle.

Answer 3

Вы можете использовать display: inline-block или float: left;