Jquery limit lines в абзаце и применить три периода до конца

Привет всем, я искал это решение, но нашел решения только для ограничения символов. У меня есть следующий код:

<div id = "ta_0" style="display: none;">
   <a href = "news.html">IRS announces 2011 COLA limits for qualified retirement plans</a>
   <br />Most retirement plan contribution and benefit limits for 2011 will
be unchanged from 2010, the IRS has announced. The 2011 cost of
living adjustments (COLAs), as applied by their Internal Revenue
C...</div>

Я хотел бы ограничить количество символов после текста после привязки текста двумя строками. Я знаю, что могу ограничить ограничение персонажа, но это может сократить слова пополам. Вместо этого я просто хочу, чтобы они остановились. Я также хотел бы добавить "..." в конце лимита.

Любые предложения?

ОТВЕТЫ

Ответ 1

Чтобы сделать это, вам нужно будет вычислить ширину текста каждой строки, особенно если вы используете шрифт с пропорциональной шириной.

Я бы предложил посмотреть на этот вопрос: Рассчитать ширину текста с помощью JavaScript

В этом вопросе рассматривается вопрос о том, как выполнять операции с текстовыми метриками. Я использовал бы это в построении, добавляя по одному слову к предложению, а когда превысил лимит, начал новую линию и останавливался, когда было достигнуто достаточное количество строк.

Ответ 2

"Две строки" практически невозможны. Это потребует двух вещей:

  • Thumbscrews CSS, который контролирует каждый аспект ширины и размера шрифта - и даже с ним вы по-прежнему не можете управлять рендерингом до 100%. Это трудная часть.
  • Знание того, как будет отображаться широкий текст. Различное количество символов может вписываться в две строки. Это невозможная часть.

Что вы можете сделать, это обернуть описательный текст в блочном элементе (т.е. a <div>) и сделать его двумя строками с высоким значением через CSS:

div.description {
  line-height: 1.2em;
  height: 1.4em;  /* max-height would be nicer but is not supported everywhere */
  overflow: hidden;
}

IE поддерживает удобное свойство text-overflow: ellipsis;, которое дает вам хорошие автоматические эллипсы …, когда текст переполняется, другие браузеры этого не делают.