Как скрыть слишком длинные тексты в элементах 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

Но как долго этот div действительно?

Пожалуйста, ознакомьтесь с моей демонстрацией jsFiddle, которая иллюстрирует разницу.

Ответ 3

Свойство 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
}

Ответ 4

попробовать Переполнение: нет;

вы не упомянули, хотите ли вы прокрутки или нет.

EDIT:

Извините, я имел в виду переполнение: скрытое.