在CSS中设置最大字符长度
我正在为学校做出反应的网站，我的问题是：
如何在我的网站（如75个字符）上设置句子（带CSS）的最大字符长度，当我有一个非常大的屏幕，句子将不会超过75个字符。
我已经尝试了一个最大宽度，但这混乱了我的布局。 我正在使用flexbox和mediaqueries使其响应。
通过设置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; }
<p>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.</p>
将它设置为最大宽度后，尝试使用此function来截断字符。 在这种情况下，我使用了75ch
p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 75ch; }
<p>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.</p>
HTML
<div id="dash"> <p>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.</p> </div>
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
<div class="wrapper"> <p class="demo-1">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.</p> </div> <div class="wrapper"> <p class="demo-2">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.</p> </div> .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; }
<p class="limited-text">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.</p>
这不可能与CSS，你将不得不使用Javascript的。 虽然可以将p的宽度设置为多达30个字符，并且下一个字母会自动下降，但是如果字符是大写字母，这将不会那么准确，并且会有所不同。
