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:
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