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

CSS

斯丁泡芙

2020-03-18

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

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

原文：

纳豆菌，马利筋，阿片草，法式
阿利盖特草，乌拉尔阿利奎特草，乌
骨茶！坐吧！乌贼属turpis
mus tincidunt！Dapibus sed aenean，magna sagittis，lorem velit

所需的输出（2行）：

胃纳豆菌，阿里卡姆，克拉斯在pellentesque
tincidunt elit purus lectus，vel ut aliquet，元素中...

第2108篇《使用CSS将文字长度限制为n行》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共9个回答

猪猪十三 2020.03.18

Basic Example Code, learning to code is easy. Check Style CSS comments.

table tr {
  display: flex;
}
table tr td {
  /* start */
  display: inline-block; /* <- Prevent <tr> in a display css */
  text-overflow: ellipsis;
  white-space: nowrap;
  /* end */
  padding: 10px;
  width: 150px; /* Space size limit */
  border: 1px solid black;
  overflow: hidden;
}

<table>
  <tbody>
    <tr>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla egestas erat ut luctus posuere. Praesent et commodo eros. Vestibulum eu nisl vel dui ultrices ultricies vel in tellus.
      </td>
      <td>
        Praesent vitae tempus nulla. Donec vel porta velit. Fusce mattis enim ex. Mauris eu malesuada ante. Aenean id aliquet leo, nec ultricies tortor. Curabitur non mollis elit. Morbi euismod ante sit amet iaculis pharetra. Mauris id ultricies urna. Cras ut
        nisi dolor. Curabitur tellus erat, condimentum ac enim non, varius tempor nisi. Donec dapibus justo odio, sed consequat eros feugiat feugiat.
      </td>
      <td>
        Pellentesque mattis consequat ipsum sed sagittis. Pellentesque consectetur vestibulum odio, aliquet auctor ex elementum sed. Suspendisse porta massa nisl, quis molestie libero auctor varius. Ut erat nibh, fringilla sed ligula ut, iaculis interdum sapien.
        Ut dictum massa mi, sit amet interdum mi bibendum nec.
      </td>
    </tr>
    <tr>
      <td>
        Sed viverra massa laoreet urna dictum, et fringilla dui molestie. Duis porta, ligula ut venenatis pretium, sapien tellus blandit felis, non lobortis orci erat sed justo. Vivamus hendrerit, quam at iaculis vehicula, nibh nisi fermentum augue, at sagittis
        nibh dui et erat.
      </td>
      <td>
        Nullam mollis nulla justo, nec tincidunt urna suscipit non. Donec malesuada dolor non dolor interdum, id ultrices neque egestas. Integer ac ante sed magna gravida dapibus sit amet eu diam. Etiam dignissim est sit amet libero dapibus, in consequat est
        aliquet.
      </td>
      <td>
        Vestibulum mollis, dui eu eleifend tincidunt, erat eros tempor nibh, non finibus quam ante nec felis. Fusce egestas, orci in volutpat imperdiet, risus velit convallis sapien, sodales lobortis risus lectus id leo. Nunc vel diam vel nunc congue finibus.
        Vestibulum turpis tortor, pharetra sed ipsum eu, tincidunt imperdiet lorem. Donec rutrum purus at tincidunt sagittis. Quisque nec hendrerit justo.
      </td>
    </tr>
  </tbody>
</table>

十三GreenTony 2020.03.18

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

Gil启人 2020.03.18

.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;
}

西里伽罗 2020.03.18

目前尚无法使用，但将来可以使用text-overflow:ellipis-lastline。目前在Opera 10.60+中可以使用带有供应商前缀的示例：example

GilLEY 2020.03.18

您可以执行以下操作：

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

<p class="max-lines">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae leo dapibus, accumsan lorem eleifend, pharetra quam. Quisque vestibulum commodo justo, eleifend mollis enim blandit eu. Aenean hendrerit nisl et elit maximus finibus. Suspendisse scelerisque consectetur nisl mollis scelerisque.</p>

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

梅小小 2020.03.18

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

樱前端 2020.03.18

据我所知，这只能通过使用来实现height: (some em value); overflow: hidden，即使这样最终也不会有幻想...。

如果这不是一个选择，我认为没有服务器端的预处理（很难，因为文本流无法可靠地预测）或jQuery（可能，但可能很复杂）是不可能的。

凯Harry 2020.03.18

以下CSS类帮助我获得了两行省略号。

  .two-line-ellipsis {
        padding-left:2vw;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 325px;
        line-height: 25px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        padding-top: 15px;
    }

番长Davaid阿飞 2020.03.18

有一种方法可以使用非官方的行钳制语法，从Firefox 68开始，它可以在所有主要浏览器上使用。

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