Как скрыть слишком длинные тексты в элементах div?
Как вы можете скрыть переполнение в div?
Здесь текст просто переносится на новую строку, если текст длиннее div
<div style="width:50px; border:1px solid black; overflow-y:hidden">
test test test test
</div>
Ответ 1
Если вы хотите показать только одну строку текста с фиксированной шириной div, дайте white-space:nowrap a go. Вместе с overflow:hidden это заставит ваш браузер не разрывать линию и обрезать вид на вашу принудительную ширину.
Вы также можете добавить text-overflow:ellipsis, чтобы избежать резки слов и букв пополам, добавляет приятный ... в конец, чтобы показать вам, что некоторые бит отсутствуют. Однако я не уверен в поддержке браузера, и я никогда не пробовал этот.
Ответ 2
Вы должны указать height для своего div, overflow: hidden; может скрывать только переполненное содержимое, если есть определенная высота.
Другими словами:
Здесь текст просто переносится на новую строку, если текст длиннее div
Свойство CSS text-overflow: ellipsis может помочь вам решить эту проблему.
Рассмотрим следующий HTML:
<div id="truncateLongTexts">
test test test test
</div>
#truncateLongTexts {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis // This is where the magic happens
}