Trim a HTML text in a div with CSS

Question

In order to display a list of news headers, I need a div of a fixed max-height.

That div should cut-off the text if the text overflows the div, and finish with an ellipsis in case of the cutt-off...

#lipsum {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-height: 75px;
  height: 75px;
  width: 100%;
}

<div id="lipsum">
  <p>
    Duis eget sapien leo. Vivamus dignissim elit eget enim varius, vel condimentum tellus sodales. Vestibulum scelerisque lectus at mauris elementum finibus. Ut enim risus, venenatis sagittis mi ac, facilisis lacinia nunc. Nam ornare urna tortor, a vehicula nisl facilisis quis. Etiam enim sem, ornare a hendrerit et, convallis id quam. Ut tincidunt facilisis tincidunt. Mauris sodales euismod orci, a tincidunt massa fermentum sed. Mauris odio quam, auctor ac viverra vitae, condimentum feugiat mauris. Phasellus fermentum velit sit amet orci interdum dignissim. Praesent venenatis aliquet magna, at hendrerit felis condimentum maximus. Fusce cursus, nulla at suscipit iaculis, magna odio bibendum arcu, a tincidunt diam sapien sit amet nisl. Nullam non risus et metus tempus finibus tempus in libero. Maecenas auctor eget mauris non malesuada. Quisque erat tellus, facilisis quis mauris quis, lacinia tristique orci. Suspendisse dignissim nibh et mi consequat venenatis.
  </p>
</div>

my problem is that the existing behavior is OK if there is only one line, but I don't need one signle line, but several lines of text until the max max-height...

See [css ellipsis on second line](http://stackoverflow.com/q/5269713/1529630) or [Limit text length to n lines using CSS](http://stackoverflow.com/q/3922739/1529630). — Oriol, Mar 16 '15 at 16:01
If i remove nowrap I loose the ellipsis and the line bellow text is cut — serhio, Mar 16 '15 at 16:02
@Oriol as I understand from other answers, this is not universally possible using just CSS — serhio, Mar 16 '15 at 16:08

score 0 · Answer 1 · edited May 23 '17 at 12:06

0

You may want to refer to the following post:

With CSS, use "..." for overflowed block of multi-lines

It looks like someone also posted an article on the topic. Though, the solutions seem a bit tangential to the problem:

https://css-tricks.com/line-clampin/

Finally, here is a .js solution:

Insert ellipsis (...) into HTML tag if content too wide

EDIT: To add to this list of resources, here is a pure css solution.

http://codepen.io/martinwolf/pen/qlFdp

*Be advised that the text-overflow:ellipsis; isn't supported in every browser, yet. Finally, here is a .js solution to the issue:

edited May 23 '17 at 12:06

Community

1
1

answered Mar 16 '15 at 16:11

Josh Salazar

412
2
10

`text-overflow` is strangely supported in IE when `white-space: nowrap;`... if not your CSS solution is not so bad... if not forced to do inline style in the HTML page... – serhio Mar 16 '15 at 17:07

score 0 · Answer 2 · answered Mar 16 '15 at 16:28

Unfortunately, I think that you cannot achieve your objective with this approach. According to this source, "This property only affects content that is overflowing a block container element in its inline progression direction (not text overflowing at the bottom of a box, for example).".

So, as also stated in other answers, this cannot be done using CSS only, unless taking into account that not every browser may support such CSS3 directives. If you are planning a more general (traditional?) solution to overcome the compatibility issue, given that you already have headers, supposed short in length, you may pre-process and present them in a Wordpress-like fashion, for example. You can check out the official documentation.

Trim a HTML text in a div with CSS

2 Answers2