CSS: Can you prevent overflow: hidden from cutting-off the last line of text?

Question

When using CSS overflow: hidden , I've often found that the last line of text gets partially cut-off. Is there a way to prevent this so that any partial lines do not show-up. Almost like a vertical word-wrap.

provide an example? maybe mess with line height on the last element. — meder omuraliev, Jul 10 '10 at 20:58
He means the content is cut mid-line, so the top half of the characters show but not the bottom. AFAIK there's no fix for this, other than screwing with the line-height (which wouldn't be a cross browser solution anyway) — Rob, Jul 10 '10 at 21:02
why are you using overflow? to contain floats? or do you really need to hide stuff overflowing? — meder omuraliev, Jul 10 '10 at 21:02

stalkerg · Answer 1 · 2019-03-25T08:15:12.633

15

You can use wrapper div and multi-column css:

.wrapper {
    -webkit-column-width: 150px; //You can't use 100%
    column-width: 150px;
    height: 100%;
}

Solution example: http://jsfiddle.net/4Fpq2/9/

Update 2017-09-21

In Firefox this solution still works but broken in Chrome. Recently Chrome started break column by small parts, also stop break content if you set height. In this http://jsfiddle.net/4Fpq2/446/ example, I change hight to max-height and show strange Chrome behavior. If you have ideas please write in comments.

Update 2019-03-25

Basically, it's work even for Chrome but you should have at least two lines. For a block with some amount of visible text this approach still should work fine.

http://jsfiddle.net/ncmo9yge/

edited Mar 25 '19 at 08:15

answered Feb 13 '14 at 13:20

stalkerg

494
6
9

Works for me. :) I can't get it to work with `text-overflow:ellipsis`, though. Is that possible? – Cees Timmerman Jan 21 '15 at 10:54
1

In this method, there is no overflow. Therefore, the text-overflow: ellipsis will not work. CSS Regions maybe can help but: http://caniuse.com/#feat=css-regions :( – stalkerg Jan 22 '15 at 11:55
@Swen it still works for Firefox, please see an update. – stalkerg Sep 21 '17 at 05:01
This is a really, really slick move, thanks for sharing! – Hank Nov 21 '17 at 21:05

score 10 · Answer 2 · answered Mar 09 '16 at 13:47

Once you understand how the column-width work, @stalkerg's answer makes a lot of sense.

The column-width splits the content in columns, so the last line of the text would not fit, it will be moved to the next column. Now the trick is to make the column-width as wide as the container. The container has overflow: hidden, so the 2nd column won't show.

.box {
    width: 200px;
}
.container {
    -webkit-column-width: 200vw;
    -moz-column-width:    200vw;
    column-width:         200vw;
    height:               100%;
}

score 2 · Answer 3 · edited May 23 '17 at 12:16

2

This solution worked for me: https://stackoverflow.com/a/17413577/2540428 Essentially create a wrapper div with the appropriate padding and put the content in the main div where you edit its height and hide the overflow. See link for more details.

edited May 23 '17 at 12:16

Community

1
1

answered Jul 01 '13 at 21:23

seon

61
5

score 1 · Answer 4 · edited May 23 '17 at 12:01

1

Rob is correct. I was making a div that had a max-height of 11em and the last line of overflow text was only half there. white-space: nowrap just eliminates that last line all together.

I tried

white-space: nowrap;

and Gaby is also correct that this causes problems too.

The best I came up with was to fiddle with the line-height and div height until the fewest lines were cut-off

edited May 23 '17 at 12:01

Community

1
1

answered Jul 10 '10 at 21:07

Get the Jaws of Life

425
2
6
14

3

this only works because your last line was produced by a long line wrapping. If there was an
in it, it would still partially show .. You need to make sure that the `height` of the div can be exactly divided by its `line-height` .. – Gabriele Petrioli Jul 10 '10 at 21:10
Makes sense. I did make the height of the div something like 11em. Would that make any difference? – Get the Jaws of Life Jul 11 '10 at 15:33

score 1 · Answer 5 · answered Feb 23 '18 at 10:47

1

that worked for me:

.wrapper_container{
    width: 300px;
    height: 200px;
    overflow: hidden;
}

.wrapper{
    -webkit-column-width: 300px;
    column-width: 300px;
    height: 100%;
}

answered Feb 23 '18 at 10:47

Klaudia Brysiewicz

119
4

Thanks this worked for me. The thing is that my width for wrapper_container is 50%, in other words varying. So in .wrapper, I changed -webkit-column-width: and column-width: to 500px, which is larger than my .wrapper container width will ever be. Well, it worked, but I'm a bit surprised. Do you think it's safe to do this? – flobacca Nov 30 '18 at 01:26
Actually, my width varies from 220px to 390px. So I set column:width to 219px. It will be in one column when the outer container width is smallest and it will be one column when the outer container width is largest. I feel better about this, since I don't think text will be cut off. If you have time, I'd love to hear your opinion. – flobacca Nov 30 '18 at 02:01

score 0 · Answer 6 · answered Aug 02 '14 at 19:54

0

There are two css3 property exist. 1) word-break & 2) word-arap

Don't forget these are new property that is css3. So that older browsers do not support such property.

.class-name {word-break: break-all;}
.class-name {word-wrap: break-word;}

answered Aug 02 '14 at 19:54

Ahmad Sharif

4,141
5
37
49

I don't know why this was downvoted, `word-break: break-all` fixed the particular I was having with the ellipses being cut off shorter than the container allowed. – Andrew Appleby Jun 09 '23 at 20:43

score -1 · Answer 7 · answered May 25 '16 at 11:04

-1

just add column-width attribute and set width of the container, it will work.

answered May 25 '16 at 11:04

Nauman Sharif

205
2
12

score -1 · Answer 8 · answered Jan 29 '19 at 08:03

-1

just use the border instead of padding.

answered Jan 29 '19 at 08:03

gouraw

1

Could you explain how you should use border instead of padding, with an example, preferably? – Smar Oct 18 '19 at 08:56

CSS: Can you prevent overflow: hidden from cutting-off the last line of text?

8 Answers8

Linked