Hiding partly overflowing text in a multi-line div?

Question

How do I remove or hide a partly overflowing text row? Example:

Html:

<div>Lot of interesting text in this multi-line box but how do I remove or hide the last line</div>

Css:

div {
    border: 1px solid black;
    height:65px;
    width:150px;
    overflow:hidden;
}

https://jsfiddle.net/7mudnnco/

Edit: Image of how I want the result:

Image of how I want the result

Edit2: This similar question has a almost working solution but I am looking for a solution where all lines is hidden when no line is fully visible. An almost working solution: http://jsfiddle.net/4Fpq2/9/ (Change height to 15px to see why it is not fully working)

I'm not sure if I'm understanding. Do you want to avoid linebreaks? — Diego, Jul 08 '15 at 19:36
for single line ellipsis property is available but for multi line you need to go for programmatic approach — vinayakj, Jul 08 '15 at 19:37
possible duplicate of [CSS: Can you prevent overflow: hidden from cutting-off the last line of text?](http://stackoverflow.com/questions/3220812/css-can-you-prevent-overflow-hidden-from-cutting-off-the-last-line-of-text) — Serlite, Jul 08 '15 at 19:38
The solution (http://jsfiddle.net/4Fpq2/9/) posted in that question is almost there but not working 100% in my case. If not even a single line i fully visible, I want the box to be empty. Edited height in the solution to show the problem: http://jsfiddle.net/4Fpq2/283/ — Henning Hall, Jul 09 '15 at 10:00

score 1 · Answer 1 · answered Jul 08 '15 at 19:39

1

If the font size and the box size are known you can simply design the box so it contains exactly 3 lines of text, one way to do that would be:

div {
    border: 1px solid black;
    height:65px;
    width:150px;
    overflow:hidden;
    line-height: 22px;   
}

answered Jul 08 '15 at 19:39

asiop

707
4
11

But this changes default `line-height`. – Matjaž Jul 08 '15 at 19:41
It is unfortunately not the case, the box could have any height. – Henning Hall Jul 08 '15 at 19:42
You can play with many other properties to achieve a design that won't break the line, line height is one example, alternatively you could add some padding, or make the font a bit larger or the box a bit smaller. You get the idea... – asiop Jul 08 '15 at 19:43
If the height is unknown in advance you could use some javascript to measure the actual height and adjust other properties accordingly. But if the box height is unknown perhaps you don't need to specify its height at all so it will adjust to the content hmm? – asiop Jul 08 '15 at 19:46
The height is unknown but fixed and cant be changed. A javascript solution might be possible but I recon unnecessary complex. Have a look at the almost working CSS solution in the question comments above and see if you can solve it. – Henning Hall Jul 09 '15 at 10:05
Wow, interesting, I wasn't aware of the effect of the column-width property. I have no idea how to improve that CSS only. It will be interesting to follow this though. – asiop Jul 09 '15 at 12:37

score -1 · Answer 2 · answered Jul 08 '15 at 19:39

-1

Like this:

div {
    border: 1px solid black;
    line-height: 2.5ex; /* <-- default value */
    height: 7.5ex;      /* 3 * 2.5ex = 7.5ex (3 rows) */
    width:150px;
    overflow:hidden;
}

JSFiddle

answered Jul 08 '15 at 19:39

Matjaž

2,096
3
35
55

This doesn't work in cases where the number of lines is unknown, right? – Henning Hall Jul 09 '15 at 10:27
You can use jquery and dynamical change height property. `$('div').css('height', numberOfLines * lineHeight);` – Matjaž Jul 09 '15 at 10:41

Hiding partly overflowing text in a multi-line div?

2 Answers2