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

css overflow hidden
Get the Jaws of Life picture Get the Jaws of Life · Jul 10, 2010 · Viewed 25.7k times · Source

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

stalkerg picture stalkerg · Feb 13, 2014

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/

Related questions

Make child visible outside an overflow:hidden parent

In CSS the overflow:hidden is set on parent containers in order to allow it to expand with the height of their floating children. But it also has another interesting feature when combined with margin: auto... If PREVIOUS sibling is …

Read More
CSS: Is it correct that text content of a div overflows into the padding?

I expected that the padding inside a div would remain clear of any text. But given the following html/css, the content-text spills out into the padding; <div class="foo">helloworld</div> .foo { float: left; overflow: …

Read More
What does overflow: hidden do for ul tag?

I'm creating a multiple column list using the directions from this article: http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/ In a nutshell, it says to do something along the lines of this: HTML: <div class='block'> <ul> <li&…

Read More