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

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

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

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

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

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

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

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

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

Ответы

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*/

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