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

css overflow hidden

32,326

Solution 1

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/

Solution 2

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%;
}

Solution 3

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.

Solution 4

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

Solution 5

that worked for me:

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

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

View more solutions

32,326

Get the Jaws of Life

Updated on July 09, 2022

Comments

Get the Jaws of Life almost 2 years

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.
- meder omuraliev almost 14 years
  
  provide an example? maybe mess with line height on the last element.
- Rob almost 14 years
  
  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)
- meder omuraliev almost 14 years
  
  why are you using overflow? to contain floats? or do you really need to hide stuff overflowing?
Gabriele Petrioli almost 14 years

this only works because your last line was produced by a long line wrapping. If there was an <br /> 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 ..
Get the Jaws of Life almost 14 years

Makes sense. I did make the height of the div something like 11em. Would that make any difference?
Cees Timmerman over 9 years

Works for me. :) I can't get it to work with text-overflow:ellipsis, though. Is that possible?
stalkerg over 9 years

In this method, there is no overflow. Therefore, the text-overflow: ellipsis will not work. CSS Regions maybe can help but: caniuse.com/#feat=css-regions :(
stalkerg almost 7 years

@Swen it still works for Firefox, please see an update.
Hank over 6 years

This is a really, really slick move, thanks for sharing!
flobacca over 5 years

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 over 5 years

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.
Smar over 4 years

Could you explain how you should use border instead of padding, with an example, preferably?