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

Question

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

text-overflow: ellipsis; 仅适用于1行文本.

原文:

Ultrices natoque mus mattis,aliquam,cras in pellentesque tincidunt
elit purus lectus,vel ut aliquet,elementum
nunc nunc rhoncus placerat urna!坐下来看看!Ut penatibus turpis
mus tincidunt!Dapibus sed aenean,magna sagittis,lorem velit

想要输出(2行):

Ultrices natoque mus mattis,aliquam,cras in pellentesque
tincidunt elit purus lectus,vel ut aliquet,elementum ...

Answer 1

有一种方法,但它只是webkit.但是,当你将它与它结合使用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/

Answer 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:× <number-of-lines>in em.

Answer 3

使用跨浏览器解决方案

多年来这个问题困扰着我们所有人......

为了在所有情况下提供帮助,我已经列出了仅CSS的方法,以及一个jQuery方法,以防css警告出现问题.

这是我提出的CSS解决方案,适用于所有情况,但有一些小问题.

基础很简单,它隐藏了跨度的溢出,并根据Eugene Xa建议的线高设置最大高度.

然后在包含div之后有一个伪类,它可以很好地放置省略号.

注意事项

无论是否需要,此解决方案将始终放置省略号.

如果最后一行以结尾句结束,那么最终会得到四个点....

您需要对合理的文本对齐感到满意.

省略号将位于文本的右侧,看起来很草率.

代码+片段

的jsfiddle

.text {
  position: relative;
  font-size: 14px;
  color: black;
  width: 250px; /* Could be anything you like. */
}

.text-concat {
  position: relative;
  display: inline-block;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 3.6em; /* (Number of lines you want visible) * (line-height) */
  line-height: 1.2em;
  text-align:justify;
}

.text.ellipsis::after {
  content: "...";
  position: absolute;
  right: -12px; 
  bottom: 4px;
}

/* Right and bottom for the psudo class are px based on various factors, font-size etc... Tweak for your own needs. */

<div class="text ellipsis">
  <span class="text-concat">
Lorem ipsum dolor sit amet, nibh eleifend cu his, porro fugit mandamus no mea. Sit tale facete voluptatum ea, ad sumo altera scripta per, eius ullum feugait id duo. At nominavi pericula persecuti ius, sea at sonet tincidunt, cu posse facilisis eos. Aliquid philosophia contentiones id eos, per cu atqui option disputationi, no vis nobis vidisse. Eu has mentitum conclusionemque, primis deterruisset est in.

Virtute feugait ei vim. Commune honestatis accommodare pri ex. Ut est civibus accusam, pro principes conceptam ei, et duo case veniam. Partiendo concludaturque at duo. Ei eirmod verear consequuntur pri. Esse malis facilisis ex vix, cu hinc suavitate scriptorem pri.
  </span>
</div>

jQuery方法

在我看来,这是最好的解决方案,但不是每个人都可以使用JS.基本上,jQuery将检查任何.text元素,如果有比预设的max var更多的字符,它将关闭其余部分并添加省略号.

这种方法没有任何警告,但是这个代码示例仅用于演示基本思想 - 我不会在生产中使用它而不改进它有两个原因:

1)它将重写.text elems的内部html.是否需要.2)没有测试检查内部html没有嵌套元素 - 所以你很依赖作者正确使用.text.

编辑

感谢@markzzz的捕获

代码和片段

的jsfiddle

setTimeout(function()
{
	var max = 200;
  var tot, str;
  $('.text').each(function() {
  	str = String($(this).html());
  	tot = str.length;
    str = (tot <= max)
    	? str
      : str.substring(0,(max + 1))+"...";
    $(this).html(str);
  });
},500); // Delayed for example only.

.text {
  position: relative;
  font-size: 14px;
  color: black;
  font-family: sans-serif;
  width: 250px; /* Could be anything you like. */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="text">
Old men tend to forget what thought was like in their youth; they forget the quickness of the mental jump, the daring of the youthful intuition, the agility of the fresh insight. They become accustomed to the more plodding varieties of reason, and because this is more than made up by the accumulation of experience, old men think themselves wiser than the young.
</p>

<p class="text">
Old men tend to forget what thought was like in their youth;
</p>
 <!-- Working Cross-browser Solution

This is a jQuery approach to limiting a body of text to n words, and end with an ellipsis -->

Answer 4

据我所知,这只有可能使用height: (some em value); overflow: hidden,即便如此,它最终也不会有幻想....

如果这不是一个选项,我认为没有一些服务器端预处理(很难,因为文本流不可能无法可靠地预测)或jQuery(可能但可能复杂)是不可能的.

Answer 5

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

Answer 6

2024 年更新：更短的方法

这是根据Tailwind CSS 3.4+，您可以使用该实用程序line-clamp-*，但下面是 css 版本。

div {
  width: 200px;
}

p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
  </p>
<div>

具有后备功能的浏览器安全方法：

div {
  width: 200px;
}

p {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  height: 2.6em; /* Fallback for non-webkit, line-height * 2 */
  line-height: 1.3em;
  -webkit-line-clamp: 2; /* if you change this, make sure to change the fallback line-height and height */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
  </p>
<div>

Answer 7

对于 React 用户，使用内联样式：

<p
    style={{
        overflow: "hidden",
        textOverflow: "ellipsis",
        display: "-webkit-box",
        lineClamp: 2,
        WebkitLineClamp: 2,
        WebkitBoxOrient: "vertical",
    }}
>
    Some Text
</p>;

Answer 8

以下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;
    }

Answer 9

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

Answer 10

目前你不能,但将来你将能够使用text-overflow:ellipis-lastline.目前,它可以在Opera 10.60+中使用供应商前缀:示例

Answer 11

我有一个运行良好的解决方案，但它使用渐变代替省略号。当您有动态文本时它会起作用，因此您不知道它是否足够长以需要椭圆。优点是您不必进行任何 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