使用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,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}

博客文章： http ： //salzerdesign.com/blog/？p = 453

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

#4楼

我一直在寻找这个，但后来我意识到，该死的我的网站使用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;
?>

#5楼

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

#6楼

我真的很喜欢线夹，但是还不支持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*/
}

现在假设您要通过jQuery删除并添加带有链接的此类，则需要有一个额外的像素，因此max-height为63 px，这是因为您需要每次检查高度是否大于62像素，但是在4行的情况下，您将得到一个假的true，因此一个额外的像素将解决此问题，并且不会造成任何额外的问题

我将为此粘贴一个咖啡脚本，仅作为示例，使用默认情况下隐藏的几个链接，这些类具有“ read-more”和“ read-less”类，它将删除那些不需要它的内容并删除主体-溢出类

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

#7楼

据我所知，这只能使用height: (some em value); overflow: hidden height: (some em value); overflow: hidden ，即使那样也没有幻想...最后。

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

#8楼

基本示例代码，学习代码很容易。检查样式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>

#9楼

跨浏览器的有效解决方案

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

为了在所有情况下都提供帮助，我提出了仅CSS的方法，以及在css警告有问题的情况下使用jQuery的方法。

这是我想出的仅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元素的内部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 -->

#10楼

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

#11楼

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

#12楼

如果您想专注于每个letter ，可以这样做，我指的是这个问题

 function truncate(source, size) { return source.length > size ? source.slice(0, size - 1) + "…" : source; } var text = truncate('Truncate text to fit in 3 lines', 14); console.log(text);

如果您想专注于每个word ，可以这样做+空格

 const truncate = (title, limit = 14) => { // 14 IS DEFAULT ARGUMENT const newTitle = []; if (title.length > limit) { title.split(' ').reduce((acc, cur) => { if (acc + cur.length <= limit) { newTitle.push(cur); } return acc + cur.length; }, 0); return newTitle.join(' ') + '...' } return title; } var text = truncate('Truncate text to fit in 3 lines', 14); console.log(text);

如果您想专注于每个word ，可以像这样+不用空格

 const truncate = (title, limit = 14) => { // 14 IS DEFAULT ARGUMENT const newTitle = []; if (title.length > limit) { Array.prototype.slice.call(title).reduce((acc, cur) => { if (acc + cur.length <= limit) { newTitle.push(cur); } return acc + cur.length; }, 0); return newTitle.join('') + '...' } return title; } var text = truncate('Truncate text to fit in 3 lines', 14); console.log(text);

#13楼

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