1

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

并且每篇文章都有一个摘要div。

目前，我正在汇总加载整个内容div并为此设置此样式overflow:hidden。这是结果：

当前结果

但是那条零碎的行（最后一行）很难看，而且整个内容都在下载到用户的计算机上，这对速度和性能不利。

我想要这样的东西：（下图是我的目标）

目标

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

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

怎么做？

PS：有人知道这个问题的更好标题吗？

4

4 回答 4

2

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

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

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

于 2012-07-18T08:24:21.660 回答
1

将您的文本放在另一个 div 中并使用height+line-height

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

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

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

于 2012-07-18T08:30:46.890 回答
0

如果您在浏览器兼容性方面使用 CSS3 没有问题，您可以使用 CSS 截断文本，就像在本教程中一样：

.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，这里有一个如何使用 XMLs 处理它的教程

于 2012-07-18T08:18:55.537 回答
0

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

然后，如果您只想使用 CSS 执行此操作，您只需让 div 的高度为自动。它可能不会对所有人都一样，但它会看起来不错。

于 2012-07-18T08:29:00.367 回答