Как сделать автоматический resize li, если максимальная ширина достигнута?

Question

[Александр Шендрик]

От сервева прихот текст, вставляемый в li, проблема в том, что если сообщение слишком длинное, li просто растягивается, а не увеличивается в ширину, хотя max-width я установил.
Как это исправить?

Comments

[Евгений Петров]

Не увеличивается в высоту, вы хотели сказать?

[Алексей Уколов]

Как это исправить?

Показать код

[Александр Шендрик]

Алексей Уколов:
.l{
float: left;
margin-top: 20px;
max-width: 80%;
display:inline-block;
width: 100%;
}

$("#chatul").append("" + hour + ":" + minutes + ""+ texti +"");

[Александр Шендрик]

$("#chatul").append("" + hour + ":" + minutes + ""+ texti +"");

[Александр Шендрик]

Евгений Петров: он в высоту не увеличивается, а хотелось бы.

Answer 1

[Вячеслав Овчинников]

Возможно параметр "white-space: nowrap;" унаследовался. Попробуйте прописать "white-space: normal;".
И еще когда делаете append - добавить в конце пробел, а то может у вас весь текст в одно "слово" получается.

$("#chatul").append("" + hour + ":" + minutes + ""+ texti +" ");

P.S. конечно max-width: 80%; и width: 100%; вместе - весело выглядит ))

Comments

[Александр Шендрик]

Я добавил, но ничего не изменилось

[Вячеслав Овчинников]

И white-space: normal; и пробел?

[Александр Шендрик]

Вячеслав Овчинников: Пробел в конце append поставил.

[Вячеслав Овчинников]

А это длинное сообщение от сервера, которое растягивает li, случайно не в одно слово идет? Можно примерчик? И еще, если в этом сообщении и есть пробелы - не факт что по ним будет переносится текст, может они неразрывные.

[Александр Шендрик]

Вячеслав Овчинников: вот что забавно, по пробелам он как раз таки и разделяет на строки, слов через пробел идут.

Answer 2

[Денис Инешин]

В запущенных случаях может помочь:

.block {
    word-wrap: break-word;
}

jsfiddle.net/IonDen/ht6b20w8

Answer 3

[Глюкъ Виртуален]

Вы установили max-width
Блок не увеличивается в ширину

Разве здесь что-то не так?

Comments

[Александр Шендрик]

Тектс выходит за блок.

[Глюкъ Виртуален]

Попытался воспроизвести этот глюк, но ниасилил.
Ссылку на достижение — в студию!

[Александр Шендрик]

Глюкъ Виртуален: $("#chatul").append("" + hour + ":" + minutes + ""+ text +"" );