我可以完全隐藏半截掉的文本行吗？ [英] Can I completely hide lines of text that are half cut off?

问题描述

如果我把一个文本的主体放置到一个具有设定高度和隐藏溢出的容器中，我通常会得到最后一行可能适合被截断。 （通过使用CSS ，对于多行的溢出块使用...）

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 text-overflow but you have to do it with JavaScript for multiples lines: http://pvdspek.github.com/jquery.autoellipsis/ (via With CSS, use "..." for overflowed block of multi-lines)

这篇关于我可以完全隐藏半截掉的文本行吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！