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

Is it possible to limit a text length to "n" lines using CSS (or cut it when overflows vertically).

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

text-overflow: ellipsis; only works for 1 line text.

文本溢出:省略;只适用于一行文本。

original text:

原文:

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

乌尔特里塞斯·奥古斯丁，阿利卡姆，在比利伦斯式的叮当声中听出了莱索托的哭声，哇，阿利奎特曼顿，永远的声音!坐est sed !你的阴茎肿得很厉害!大人马座，罗伦

wanted output (2 lines):

想要的输出(2线):

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

ultrinatces oque mattis, aliquam, cras in pellentesque tincidunt elit purus lectus, vel ut aliquet, elementum…

11 个解决方案

#1

There is a way, but it is webkit-only. However, when you combine this with line-height: X;, and max-height: X*N;, it will also work in other browsers, just without ellipses.

有一种方法，但它只是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 */
}

Demo: http://jsfiddle.net/csYjC/1131/

#2

What you can do is the following:

你能做的是:

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

where max-height: = line-height: × <number-of-lines> in em.

max-height:=行高:× <行数> 在新兴市场。

#3

As far as I can see, this would be possible only using height: (some em value); overflow: hidden and even then it wouldn't have the fancy ... at the end.

在我看来，这只能使用高度:(一些em值);溢出:隐藏，即使那样它也不会有幻想……在最后。

If that is not an option, I think it's impossible without some server side pre-processing (difficult because text flow is impossible to predict reliably) or jQuery (possible but probably complicated).

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

#4

Working Cross-browser Solution

工作跨浏览器的解决方案

This problem has been plaguing us all for years...

这个问题困扰我们多年了……

To help in all cases, I have laid out the CSS only approach, and a jQuery approach in case the css caveats are a problem.

为了帮助所有的情况，我已经列出了CSS的唯一方法，以及一个jQuery方法，以防CSS警告是一个问题。

Here's a CSS only solution I came up with that works in all circumstances, with a few minor caveats.

这是我提出的一个CSS唯一解决方案，在任何情况下都可以使用，但有一些小问题需要注意。

The basics are simple, it hides the overflow of the span, and sets the max height based on the line height as suggested by Eugene Xa.

基本原理很简单，它隐藏了跨度的溢出，并根据Eugene Xa建议的线高设置最大高度。

Then there is a pseudo class after the containing div that places the ellipsis nicely.

然后在包含的div后面有一个伪类，可以很好地放置省略号。

Caveats

警告

This solution will always place the ellipsis, regardless if there is need for it.

这个解决方案将始终放置省略号，不管是否需要它。

If the last line ends with an ending sentence, you will end up with four dots....

如果最后一行的结尾结束句子,你最终会有四个点....

You will need to be happy with justified text alignment.

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

The ellipsis will be to the right of the text, which can look sloppy.

省略号将会在文本的右边，看起来会很邋遢。

Code + Snippet

代码+片段

jsfiddle

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 Approach

jQuery方法

In my opinion this is the best solution, but not everyone can use JS. Basically, the jQuery will check any .text element, and if there are more chars than the preset max var, it will cut the rest off and add an ellipsis.

在我看来，这是最好的解决方案，但不是每个人都可以使用JS。基本上，jQuery将检查任何.text元素，如果有更多的chars，而不是预设置的max var，它将会将其余的去掉，并添加一个省略号。

There are no caveats to this approach, however this code example is meant only to demonstrate the basic idea - I wouldn't use this in production without improving on it for a two reasons:

对于这种方法没有什么需要注意的地方，但是这个代码示例仅仅是为了演示基本的思想——我不会在生产中使用它而不进行改进，原因有两个:

1) It will rewrite the inner html of .text elems. whether needed or not. 2) It does no test to check that the inner html has no nested elems - so you are relying a lot on the author to use the .text correctly.

1)它将重写。text elems的内部html。是否需要。2)检查内部html是否没有嵌套的elems是没有任何测试的——因此，您非常依赖于作者正确地使用.text。

Edited

Thanks for the catch @markzzz

谢谢@markzzz

Code & Snippet

代码和代码片段

jsfiddle

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 -->

#5

The solution from this thread is to use the jquery plugin dotdotdot. Not a CSS solution, but it gives you a lot of options for "read more" links, dynamic resizing etc.

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

#6

Currently you can't, but in future you will be able to use text-overflow:ellipis-lastline. Currently it's available with vendor prefix in Opera 10.60+: example

目前您不能，但将来您将能够使用text-overflow: ellipiss -lastline。目前，在Opera 10.60+: example中，它带有供应商前缀

#7

following CSS class helped me in getting two line ellipsis.

通过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;
    }

#8

I have a solution which works well but instead an ellipsis it uses a gradient. It works when you have dynamic text so you don't know if it will be long enough to need an ellipse. The advantages are that you don't have to do any JavaScript calculations and it works for variable width containers including table cells and is cross-browser. It uses a couple of extra divs, but it's very easy to implement.

我有一个很好用的解，但它用的是一个梯度。当你有动态文本时，它会起作用，所以你不知道它是否足够长，需要一个椭圆。优点是，您不需要做任何JavaScript计算，它适用于包括表单元格和跨浏览器的可变宽度容器。它使用了一些额外的divs，但是很容易实现。

Markup:

标记:

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

CSS:

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%);
}

blog post: http://salzerdesign.com/blog/?p=453

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

example page: http://salzerdesign.com/test/fade.html

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

#9

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

基本示例代码，学习代码很容易。检查CSS风格的评论。

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>

#10

I really like line-clamp, but no support for firefox yet.. so i go with a math calc and just hide the overflow

我很喜欢line-clamp，但是还不支持firefox。所以我用一个数学计算器来隐藏溢出

.body-content.body-overflow-hidden h5 {
    max-height: 62px;/* font-size * line-height * lines-to-show(4 in this case) 63px if you go with jquery */
    overflow: hidden;
}
.body-content h5 {
    font-size: 14px; /* need to know this*/
    line-height:1,1; /*and this*/
}

now lets say you want to remove and add this class via jQuery with a link, you will need to have an extra pixel so the max-height it will be 63 px, this is because you need to check every time if the height greather than 62px, but in the case of 4 lines you will get a false true, so an extra pixel will fix this and it will no create any extra problems

现在让说你想删除和添加这个类通过jQuery和一个链接,你将需要一个额外的像素所以max-height 63 px,这是因为你每次都需要检查,如果高度危害性62 px,但在4线的情况下你会得到一个虚假的事实,所以额外的像素将解决这个问题,它不会产生任何额外的问题

i will paste a coffeescript for this just to be an example, uses a couple of links that are hidden by default, with classes read-more and read-less, it will remove the ones that the overflow is not need it and remove the body-overflow classes

我将把一个coffeescript粘贴到这个例子中，它使用了几个链接，默认情况下隐藏了一些链接，类的读写更少，它将删除溢出的不需要的链接，并删除body溢出类。

jQuery ->

    $('.read-more').each ->
        if $(this).parent().find("h5").height() < 63
             $(this).parent().removeClass("body-overflow-hidden").find(".read-less").remove()
             $(this).remove()
        else
            $(this).show()

    $('.read-more').click (event) ->
        event.preventDefault()
        $(this).parent().removeClass("body-overflow-hidden")
        $(this).hide()
        $(this).parent().find('.read-less').show()

    $('.read-less').click (event) ->
        event.preventDefault()
        $(this).parent().addClass("body-overflow-hidden")
        $(this).hide()
        $(this).parent().find('.read-more').show()

#11

I've been looking around for this, but then I realize, damn my website uses php!!! Why not use the trim function on the text input and play with the max length....

我一直在寻找这个，但后来我意识到，我的网站使用php!!!为什么不使用修剪函数在文本输入和最大长度....玩吧

Here is a possible solution too for those using php: http://ideone.com/PsTaI

对于那些使用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;
?>