Отрежьте текст, прежде чем читать дальше

Question

У меня есть тексты, которые большую часть времени помещаются в раздел, но иногда они не подходят. Невозможно определить, сколько символов / слов / абзацев помещается в элемент div, поэтому я не могу обрезать его таким образом.

У div была фиксированная высота и ширина, так что мы можем с этим что-то сделать? Или у вас есть какие-либо предложения, как получить все в div, правильным способом?

Answer 1

Если текст не подходит, вы можете использовать css elipses, чтобы он выглядел чище. Возможно, поместите текст в скрытый элемент и измерьте высоту, чтобы увидеть, нужно ли вам добавить (еще) ссылку.

См. http://mattsnider.com/css/css-string-truncation-with-ellipsis/

Answer 2

Использование этого класса - лучший способ решения такой проблемы:

.truncate {
  width: 200px;      // Here you can also use ems as measure of width
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Answer 3

Вы можете использовать различные значения переполнения в css, «auto» должно вызывать появление полосы прокрутки, когда текст больше, чем позволяет высота / ширина, или «hidden», чтобы обрезать ее.

см .: http://www.quirksmode.org/css/overflow.html

Answer 4

Я написал функцию усечения в JavaScript, которая начинается с блока текста, и если он обнаруживает переполнение (scrollheight > height), он начинает удалять слова до тех пор, пока не уместится, а затем добавляет «просмотреть еще» ссылка.

Answer 5

Да, вы можете что-то сделать с этим. Дайте div в вопросе overflow: hidden. Затем установите высоту div, кратную line-height (это будет зависеть от того, сколько строк вы хотите показать), чтобы не отрезать нижние части текста.