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.

Answer 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/

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

Answer 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.

Answer 4

that worked for me:

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

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

Answer 5

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

Answer 6

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

Answer 7

just use the border instead of padding.

Answer 8

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