JavaScript: усечение текста на основе размеров внешнего объекта

Question

Я хочу, используя JavaScript, обрезать заданный текст, чтобы он соответствовал объекту, в котором находится текст, и добавить «...» в конце.

Например: JavaScript получил данные от стороннего веб-сервиса и должен поместить текст в формат 200 x 300 пикселей. Длина текста может быть разной, поэтому предположим, что она займет гораздо больше места, чем предусмотрено.

Как определить, в какой точке текст будет прорываться через границу, и предотвратить это, выделив текст и добавив "..." в конце?

Answer 1

Есть несколько плагинов jQuery , которые могут сделать это.

Answer 2

Вы также можете посмотреть в CSS 3 свойство text-overflow, которое также делает это.

http://www.w3.org/TR/2001/WD-css3-text-20010517/#text-overflow-props

Можно проверить, поддерживает ли браузер его, поэтому вы всегда можете добавить откат JavaScript.

if (!'textOverflow' in document.createElement('div').style) {
   // Use JavaScript solution here
}

Answer 3

ruzee.com имеет решение , которое использует prototype.js и небольшой кусочек кода [MIT licensed], чтобы делать то, что вы хотите; демо

Answer 4

Если вы не возражаете против использования элемента canvas, его можно использовать для измерения ширины текста.Вот пример:

http://uupaa -js-spinoff.googlecode.com / svn / trunk / uupaa-excanvas.js / demo / 8_2_canvas_measureText.html