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

Question

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

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

Так, например My really long text становится My really lo...

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

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

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

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

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

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

Answer 2

Вы должны смотреть на CSS многоточие: http://www.w3schools.com/cssref/css3_pr_text-overflow.asp

Answer 3

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

fiddle

Answer 4

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

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

Eg

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