溢出：隐藏点和多行文本的结尾

Question

我正在使用ASP.NET MVC创建一个Web应用程序，它向用户显示一些文章。

并且div上的每篇文章都有摘要。

目前，我正在加载摘要div中的所有内容，并为此设置此样式overflow:hidden。这是结果：

但是那段不完整的行（最后一行）是丑陋，还有整个内容正在下载到用户的计算机上，这对速度和性能都有害。

我想要这样的事情:(下图是我的目标）

（删除最后一行的零碎文字，并在文字末尾添加...）

最好避免将整个内容下载到用户的计算机上。

怎么做？

PS：任何人都知道这个问题有更好的头衔吗？！

Answer 1

您可以设置要显示的字符数，然后如果要显示的文字大于限制数，则截断：

if(text.Length > 200)
        {
            text.Substring(0, 200) + "..."; 
        }

或者，如果您正在构建系统，则可以创建一个受限字段来保存预览文本，并在列表中显示预览文本而不是大内容

Answer 2

将您的文字放入另一个div并使用height + line-height

工作示例： http://jsfiddle.net/DNh4W/2/

如果你想以省略号结尾，CSS3中没有针对多行文字的解决方案。您必须使用javascript，例如：http://pvdspek.github.com/jquery.autoellipsis/

jquery autoellipsis示例：http://jsfiddle.net/bdM89/1/

Answer 3

如果您在浏览器兼容性方面使用CSS3没有问题，可以使用CSS截断文本，例如在this tutorial中：

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis; /* required for Opera */
    -ms-text-overflow: ellipsis;    /* required for IE8, allegedly */
    -moz-binding: url('ellipsis.xml#ellipsis');    /* for Firefox; details [here][2] */
}

关于mozilla firefox，here是一个如何使用XML处理它的教程

Answer 4

首先，我认为截断文本（到一定数量的字符）并添加省略号应该在服务器端完成。

然后，如果你想只用CSS做这个，你需要简单地让div的高度为auto。它可能不会对所有人都一样，但看起来会很好。