设置 html 最大长度,在CSS中设置最大字符长度

通过设置max-width和溢出ellipsis你总是可以使用截断方法

p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }

一个例子： http : //jsfiddle.net/3czeyznf/

对于多行截断有一个flex解决scheme。 一个截断3行的例子。

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

一个例子： https : //codepen.io/srekoble/pen/EgmyxV

有一个CSS的CSS长度值。

来自MDN

该单位表示元素字体中字形“0”(零，Unicode字符U + 0030)的宽度，或者更准确地说是高级度量。

这可能接近你以后的东西。

p { overflow: hidden; max-width: 75ch; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt rem odit quis quaerat. In dolorem praesentium velit ea esse consequuntur cum fugit sequi voluptas ut possimus voluptatibus deserunt nisi eveniet!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem voluptates vel dolorum autem ex repudiandae iste quasi. Minima explicabo qui necessitatibus porro nihil aliquid deleniti ullam repudiandae dolores corrupti eaque.

将它设置为最大宽度后，尝试使用此function来截断字符。 在这种情况下，我使用了75ch

p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 75ch; }

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis etc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis etc.

HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a urna ac quam.

jQuery的

var p = $('#dash p'); var ks = $('#dash').height(); while ($(p).outerHeight() > ks) { $(p).text(function(index, text) { return text.replace(/\W*\s(\S)*$/, '...'); }); }

CSS

#dash { width: 400px; height: 60px; overflow: hidden; } #dash p { padding: 10px; margin: 0; }

结果

Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Proin nisi ligula，dapibus a volutpat sit amet，mattis et …

的jsfiddle

用两种不同的方法试试我的解决scheme

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.

.wrapper { padding: 20px; background: #eaeaea; max-width: 400px; margin: 50px auto; } .demo-1 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .demo-2 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 150px; }

示例代码：

.limited-text{ white-space: nowrap; width: 400px; overflow: hidden; text-overflow: ellipsis; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.

这不可能与CSS，你将不得不使用Javascript的。 虽然可以将p的宽度设置为多达30个字符，并且下一个字母会自动下降，但是如果字符是大写字母，这将不会那么准确，并且会有所不同。