HTML-контент отображает ограниченные строки

Question

Как отображать новости, поступающие из базы данных на веб-страницу, ограничивая количество строк до 3.

Содержание новостей в формате html, например

<p><span style="font-family: HelveticaNeue LT 77 BdCn;"><span style="font-size: large;">The average house price&amp;nbsp;up by 0.3% in May</span></span></p>
<p><span style="font-family: HelveticaNeue LT 55 Roman;"><span style="font-size: small;">compared to the previous month <br />but fell 1.2% compared to May 2010</span></span></p>
<p><span style="font-family: HelveticaNeue LT 55 Roman;"><span style="font-size: small;"></span></span><span style="font-family: HelveticaNeue LT 55 Roman;"><span style="font-size: small;"><a href="http://www.nationwide.co.uk/hpi/historical/May_2011.pdf" title="Nationwide House Price Index">Nationwide House Price Index</a></span></span></p>

Как я могу отобразить первые три строки только из вышеуказанных html новостей, используя java script / css и append ... в конце.

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

Answer 1

Я думаю, что наиболее надежным способом сделать это было бы установить свойство line-height (в зависимости от того, что вам больше подходит), а затем установить для свойства height значение, в 3 раза превышающее значение, которое вы использовали для line-heightимущество.Затем просто используйте свойство overflow соответственно, как вы сказали.

Например:

.newsItems {
  line-height: 1.2em;
  height: 3.6em;
  overflow: hidden;
}

Answer 2

Если вы знаете высоту шрифта, вы можете установить высоту div соответствующим образом. Простой ответ - установить высоту 3em, хотя вам, вероятно, все еще понадобится некоторая настройка.