是否可以使用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。。。
当前回答
我有一个很好的解决方案，但省略号使用了渐变。当你有动态文本时，它会起作用，所以你不知道它是否足够长，需要一个椭圆。优点是您不必进行任何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
其他回答
我一直在寻找这个，但后来我意识到，该死的我的网站使用php！！！为什么不在文本输入上使用修剪功能并播放最大长度。。。。
对于那些使用php的人，这里也有一个可能的解决方案：http://ideone.com/PsTaI
<?php
$s = "In the beginning there was a tree.";
$max_length = 10;
if (strlen($s) > $max_length)
{
$offset = ($max_length - 3) - strlen($s);
$s = substr($s, 0, strrpos($s, ' ', $offset)) . '...';
}
echo $s;
?>
我有一个很好的解决方案，但省略号使用了渐变。当你有动态文本时，它会起作用，所以你不知道它是否足够长，需要一个椭圆。优点是您不必进行任何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
以下CSS类将文本限制为两行，并插入省略号以指示溢出的文本。
.two-line-ellipsis {
overflow: hidden;
width: 325px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
如果你想专注于每一封信，你可以这样做，我提到这个问题
函数truncate（源，大小）{返回源.length>size？source.sslice（0，大小-1）+“…”：源；}var text=truncate（'truncate text to fit in 3 lines'，14）；console.log（文本）；
如果你想专注于每个单词，你可以这样做+空格
consttruncate=（title，limit=14）=>｛//14是默认参数常量newTitle=[]；if（title.length>limit）{title.split（“”）.reduce（（acc，cur）=>{如果（acc+cur.length<=极限）{newTitle.push（cur）；}返回acc+cur.length；}, 0);return newTitle.join（“”）+“…”}返回标题；}var text=truncate（'truncate text to fit in 3 lines'，14）；console.log（文本）；
如果你想专注于每个单词，你可以这样做+没有空格
consttruncate=（title，limit=14）=>｛//14是默认参数常量newTitle=[]；if（title.length>limit）{Array.prototype.slice.call（title）.reduce（（acc，cur）=>{如果（acc+cur.length<=极限）{newTitle.push（cur）；}返回acc+cur.length；}, 0);return newTitle.join（“”）+“…”}返回标题；}var text=truncate（'truncate text to fit in 3 lines'，14）；console.log（文本）；
目前不能，但将来可以使用文本溢出：ellipis lastline。目前，它可以在中使用供应商前缀Opera 10.60+：示例
