我正在为学校做响应式网站，我的问题是:
我如何在我的网站上设置句子的最大字符长度(用CSS)(比如75个字符)，当我有一个非常大的屏幕时，句子不会超过75个字符。
我已经尝试了最大宽度，但这打乱了我的布局。我使用flexbox和媒体查询，使其响应。
当前回答
这段代码工作:
.on_table{
table-layout: fixed;
}
.on_tr_td{
border:1px solid grey;
max-width: 20ch;
color: green;
word-break:break-all
}
其他回答
现代CSS网格答案
在CodePen上查看完整的工作代码。给定以下HTML:
<div class="container">
<p>Several paragraphs of text...</p>
</div>
您可以使用CSS Grid创建三个列，并告诉容器将包含段落的中间列的最大宽度设置为70个字符。
.container
{
display: grid;
grid-template-columns: 1fr, 70ch 1fr;
}
p {
grid-column: 2 / 3;
}
这是它的样子(Checkout CodePen是一个完整的工作示例):
下面是另一个示例，您可以使用minmax来设置一个值范围。在小屏幕上，宽度将设置为50个字符宽，在大屏幕上，宽度将设置为70个字符宽。
.container
{
display: grid;
grid-template-columns: 1fr minmax(50ch, 70ch) 1fr;
}
p {
grid-column: 2 / 3;
}
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...
杰斯菲德尔
尝试在设置为max-width后截断字符。在这种情况下我使用了75ch
p { 空白：无换行; 溢出：隐藏; 文本溢出：省略号; 最大宽度：75通道; } <p>Lorem ipsum dolor sit amet， consectetur adipiscing elit.Proin nisi ligula， dapibus a volutpat sit amet， mattis 等。Lorem ipsum dolor sit amet， consectetur adipiscing elit.Proin nisi ligula， dapibus a volutpat sit amet， mattis 等。</p>
如需多行截断，请按此链接。
示例:https://codepen.io/srekoble/pen/EgmyxV
我们将为此使用webkit css。总之，WebKit是一个HTML/CSS浏览器渲染引擎Safari/Chrome。这可能是特定于浏览器的，因为每个浏览器都有一个渲染引擎来绘制HTML/CSS网页。
这在CSS中是不可能的，你必须使用Javascript。虽然你可以设置p的宽度为30个字符，下一个字母会自动下来，但这不会那么准确，如果字符是大写的，会有所不同。
示例代码:
.limited-text { 空白:nowrap;} 宽度:400 px; 溢出:隐藏; 文本溢出:省略; ｝ <p class="limited-text">我爱你，我爱你。时间和欲望是错误的，是腐败的，是幸福的!</p> .</p
