使用CSS将文字长度限制为n行

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

text-overflow: ellipsis; 仅适用于1行文字。

原文：

纳图克足癣，阿里卡姆，克拉斯
Tincidunt elit purus lectus，vel utquet，elementum nunc
nunc rhoncus placerat urna！ 坐吧！ 乌头企鹅
mus tincidunt！ Dapibus sed aenean，magna sagittis，lorem velit

所需的输出（2行）：

纳图克足癣，阿里卡姆，克拉斯
Tincidunt elit purus lectus，vel utquet，elementum ...

---

#1楼

有一种方法，但是它仅适用于webkit。 但是，将其与line-height: X;结合使用时line-height: X; ，以及max-height: X*N; ，它也可以在其他浏览器中运行，而不会出现省略号。

.giveMeEllipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* number of lines to show */
   line-height: X;        /* fallback */
   max-height: X*N;       /* fallback */
}

演示： http ： //jsfiddle.net/csYjC/1131/

---

#2楼

您可以执行以下操作：

.max-lines {
  display: block; /* or inline-block */
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 3.6em;
  line-height: 1.8em;
}

其中max-height: = line-height: × em <number-of-lines> 。

---

#3楼

我有一个效果很好的解决方案，但省略号使用渐变。 当您具有动态文本时，它可以工作，因此您不知道它是否足够长，需要椭圆形。 优点是您不必执行任何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,