Усечение текста внутри div

У меня есть динамический текст (приходит из базы данных), и мне нужно вписать в div

Мой div имеет фиксированный размер. Однако, когда текст становится слишком длинным, он разбивается на две строки. Я хотел бы поставить три точки в конце длинных текстов, чтобы они помещались в одну строку.

Например: My really long text становится My really lo...

Я совершил несколько попыток, но в основном все они зависят от подсчета символов. То есть вообще не очень повезло, ведь символы не имеют фиксированной ширины. Например, заглавная W намного шире, чем маленький i

Поэтому я сталкиваюсь с двумя основными проблемами, связанными с подходом подсчета символов:

  1. Если текст содержит много узких символов, он обрезается и добавляется с помощью..., даже если текст на самом деле помещается на одной строке выше обрезанной.

  2. Когда текст содержит много широких символов, он заканчивается двумя строками даже после того, как я обрезал его до максимального количества символов и добавил точки.

Есть ли здесь какое-либо решение (JavaScript или CSS), которое учитывает фактическую ширину текста, а не количество символов?

ОТВЕТЫ

Ответ 1

Используйте эти стили:

white-space: nowrap;      /*keep text on one line */
overflow: hidden;         /*prevent text from being shown outside the border */
text-overflow: ellipsis;  /*cut off text with an ellipsis*/

Ответ 2

Я бы предложил Trunk8

Затем вы можете сделать любой текст подходящим для размера div, он обрезает текст, который заставит его выйти за пределы 1 строки (доступны опции для установки количества разрешенных строк)

например

$('.truncate').trunk8();

Ответ 3

Помимо ellipsis, я бы предложил отобразить весь текст при наведении мыши с помощью tooltip.

fiddle