html怎么设置文字最大长度限制,使用CSS将文本长度限制为n行

跨浏览器工作解决方案

这个问题困扰我们很多年了.。

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

这是一个仅CSS我想出的解决方案在任何情况下都有效，但有几个小的注意事项。

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

然后在包含div之后有一个伪类，它很好地放置省略号。

警告

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

如果最后一行以结尾句结尾，你将得到四个圆点.

你需要对正确的文本对齐感到满意。

省略号将位于文本的右边，这看起来很草率。

代码+片段

.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. */

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.

jQuery方法

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

对于这种方法没有任何警告，但是这个代码示例只是为了演示基本思想-如果不改进它，我就不会在生产中使用它，原因有两个：

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

编辑

谢谢你的Catch@Markzzz

代码和代码片段

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. */

}

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.

Old men tend to forget what thought was like in their youth;