是否可以使用CSS将文本长度限制为“n”行(或在垂直溢出时剪切)。

文本溢出:省略号;仅适用于1行文本。

原文:

Ultrices natoque mus mattis、aliquam、cras in pellentesquetincidunt elit purus lectus、vel ut aliquet、elementum nunc乌尔纳修女院!坐下!图比斯岛莫斯·廷西杜特!Dapibus sed aenean、magna sagitis、lorem velit

所需输出(2行):

Ultrices natoque mus mattis、aliquam、cras in pellentesquetincidunt elit purus lectus,velut aliquet,elementum。。。


当前回答

以下CSS类将文本限制为两行,并插入省略号以指示溢出的文本。

.two-line-ellipsis {
  overflow: hidden;
  width: 325px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

其他回答

.class{
   word-break: break-word;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   line-height: 16px; /* fallback */
   max-height: 32px; /* fallback */
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
}

该线程的解决方案是使用jquery插件dotdotdot。这不是一个CSS解决方案,但它为您提供了很多“阅读更多”链接、动态调整大小等选项。

我有一个很好的解决方案,但省略号使用了渐变。当你有动态文本时,它会起作用,所以你不知道它是否足够长,需要一个椭圆。优点是您不必进行任何JavaScript计算,它适用于包括表格单元格在内的可变宽度容器,并且是跨浏览器的。它使用了一些额外的div,但它很容易实现。

标记:

<td>
    <div class="fade-container" title="content goes here">
         content goes here
         <div class="fade">
    </div>
</td>

CSS:

.fade-container { /*two lines*/
    overflow: hidden;
    position: relative;
    line-height: 18px; 
    /* height must be a multiple of line-height for how many rows you want to show (height = line-height x rows) */
    height: 36px;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word;
}

.fade {
        position: absolute;
        top: 50%;/* only cover the last line. If this wrapped to 3 lines it would be 33% or the height of one line */
        right: 0;
        bottom: 0;
        width: 26px;
        background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}

博客文章:http://salzerdesign.com/blog/?p=453

示例页面:http://salzerdesign.com/test/fade.html

截至(几乎)2023年,不再需要一些旧的css规则。

这些显示了所需的最小值,并且可以跨浏览器工作,尽管有前缀语法:

.line-clamp   { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; }
.line-clamp-2 { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.line-clamp-3 { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.word-limit{
   display: block;
   text-overflow: ellipsis;
   white-space: nowrap;
   word-wrap: break-word;
   overflow: hidden;
}