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

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

Answer 2

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/