我正在为学校做响应式网站，我的问题是:
我如何在我的网站上设置句子的最大字符长度(用CSS)(比如75个字符)，当我有一个非常大的屏幕时，句子不会超过75个字符。
我已经尝试了最大宽度，但这打乱了我的布局。我使用flexbox和媒体查询，使其响应。
当前回答
你可以看看你的字体有多宽，然后取平均字符像素大小。然后再乘以你想要的字符数。这有点俗气，但它是一种快速的解决方法。
其他回答
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...
杰斯菲德尔
在所有浏览器中完全支持。
在Chrome浏览器中，你可以使用"-webkit-line-clamp"来设置显示的行数:
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* Number of lines displayed before it truncate */
overflow: hidden;
所以对我来说，它是在一个扩展使用，所以它是完美的，更多信息在这里:https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-straight-up-broken-865413f16e5
有一个CSS的长度值ch。
从MDN
这个单位代表宽度，或者更准确地说，是提前测量， 符号“0”(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>
这段代码工作:
.on_table{
table-layout: fixed;
}
.on_tr_td{
border:1px solid grey;
max-width: 20ch;
color: green;
word-break:break-all
}
