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

Answer 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

Answer 2

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

Answer 3

just use the border instead of padding.

Answer 4

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 5

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 6

that worked for me:

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

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