Обозначение слов в неупорядоченном списке в html

<ul class="notice-ul"> 
<li class="notice-word-wrap">Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered</li> 
<li>Delivered</li> 
</ul>

Выше мой неупорядоченный список в html. CSS для выше:Обозначение слов в неупорядоченном списке в html

.notice-ul{ 
    list-style: none; 
} 

.notice-ul > li:before { 
content:"\2713\0020"; 
} 

.notice-word-wrap{ 
    display: block; 
    width: auto; 
    height: auto; 
    word-break: break-all; 
    word-wrap: break-word; 
    white-space: normal 
}

Проблемы я сталкиваюсь здесь о оборачивать первый список, где слова не нарушают правильно. Прикрепление полученного результата: Result in UI

источник

2016-08-11 Sundaresan.C

Если вы добавляете пробелы в слова, вы получаете какое-то нарушение? –

Так что это хорошо? –

@ThomasByy. Да, он все еще ломается неправильно. Например: Доставлено как D в первой строке и elivered во 2-й строке –

Добавление пробелов после запятой (и между словами) должно приводить к тому, что поток текста и линия прерываются нормально в html.

источник

2016-08-11 07:01:09

Да, оно все еще ломается неправильно. Например: Доставлено как D в первой строке и elivered во 2-й строке –

Попробуйте добавить пробелы и удалить эту строку из css: word-break: break-all; –

Вы можете обернуть все «не следует ломать» части с пролетом тегов и стилем диапазона элемента не ломкими.

например.

<li class="notice-word-wrap"><span>Delivered,</span><span>Delivered,</span><span>Delivered,</span><span>Delivered,</span><span>Delivered,</span><span>Delivered,</span><span>Delivered,</span><span>Delivered,</span>Delivered</li>

, а затем в вашем CSS

span{ 
     word-break: normal; 
    word-wrap: normal; 
}

Это предотвратит слова от взлома, но требует некоторого украшения контента.

источник

2016-08-11 07:38:01

Обозначение слов в неупорядоченном списке в html

ответ

Смежные вопросы