Marty Marty - 4 months ago 9x
CSS Question

Can I completely hide lines of text that are half cut off?

If I place a body of text into a container with a set height and hidden overflow, I will often end up with the final line that could fit being cut off. Example jsFiddle or image:

enter image description here

Is there a way to have that line not appear entirely rather than have this happen?

The scenario is that I have columns which are a dynamic height (100% of the parent height, which is 80% of the body height) containing blog-post text and I want to display a "read all" at the bottom if there is overflowing text (easy to determine). At the moment it just looks terrible with half rendered text sitting above it.

I can't remove the overflow as the columns need to end before the navigation, which sits at the bottom of the page.


You can inspire you from the property text-overflow but you have to do it with JavaScript for multiples lines: (via With CSS, use "..." for overflowed block of multi-lines)