将文本长度限制为使用CSS的n行
是否可以使用CSS将文本长度限制为“n”行（或者在垂直溢出时将其剪切）。
text-overflow: ellipsis; 只适用于1行文字。
原文：
Ultrices natoque mus mattis，aliquam，cras in pellentesque
tincidunt elit purus lectus，velit 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 tout aliquet，elementum …
有一种方法，但它是仅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/
你可以做的是以下几点：
.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> 。
据我所知，这只能使用height: (some em value); overflow: hidden height: (some em value); overflow: hidden ，即使如此，它不会有花哨...在最后。
如果这不是一个选项，我认为这是不可能的，没有一些服务器端预处理（很难，因为文本stream是不可能预测可靠）或jQuery（可能，但可能很复杂）。
这个线程的解决scheme是使用jquery插件dotdotdot 。 不是一个CSS解决scheme，但它为您提供了很多“阅读更多”链接，dynamicresize等选项。
使用跨浏览器的解决scheme
这个问题多年来一直困扰着我们。
为了在所有情况下提供帮助，我已经制定了CSS的唯一方法，以及一个jQuery的方法，以防css警告是一个问题。
这是我提出的一个CSS解决scheme，可以在任何情况下使用，有一些小问题。
基础很简单，它隐藏了跨度溢出，并根据Eugene Xabuild议的线高设置最大高度。
然后有一个伪类之后的包含div，很好地放置省略号。
注意事项
无论是否需要，此解决scheme将始终放置省略号。
如果最后一行以句尾结尾，则最终会有四个点。
您需要对正确的文本alignment感到满意。
省略号将在文字的右侧，看起来马虎。
代码+片段
的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>
目前你不能，但将来你将能够使用text-overflow:ellipis-lastline 。 目前在Opera 10.60+中可以使用供应商前缀： 例如
下面的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; }
我有一个很好的解决scheme，但使用渐变的省略号。 它有效，当你有dynamic文本，所以你不知道是否会足够长，需要一个椭圆。 好处是你不必做任何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
基本示例代码，学习代码很容易。 检查样式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>
我真的很喜欢线夹，但不支持Firefox。所以我走了一个math计算器，只是隐藏溢出
.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链接添加这个类，你将需要一个额外的像素，所以最大高度将是63像素，这是因为你需要检查每一次，如果高度大于62px，但在4行的情况下，你会得到一个错误的真实，所以额外的像素将解决这个问题，它不会产生任何额外的问题
我将粘贴一个coffeescript这只是一个例子，使用默认情况下隐藏的几个链接，类读取更多和读取更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()
我一直在寻找这个，但后来我意识到，该死的我的网站使用PHP！ 为什么不使用文本input的修剪function和最大长度播放….
对于那些使用php的人来说，这也是一个可能的解决scheme： 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; ?>
