我正在为学校做响应式网站,我的问题是:
我如何在我的网站上设置句子的最大字符长度(用CSS)(比如75个字符),当我有一个非常大的屏幕时,句子不会超过75个字符。
我已经尝试了最大宽度,但这打乱了我的布局。我使用flexbox和媒体查询,使其响应。
我正在为学校做响应式网站,我的问题是:
我如何在我的网站上设置句子的最大字符长度(用CSS)(比如75个字符),当我有一个非常大的屏幕时,句子不会超过75个字符。
我已经尝试了最大宽度,但这打乱了我的布局。我使用flexbox和媒体查询,使其响应。
当前回答
75个字符
我已经尝试了最大宽度,但这打乱了我的布局。
使用max-width: 75ch,然后创建一个布局,当你超过这个宽度时不会乱。
其他回答
在所有浏览器中完全支持。
用两种不同的方法试试我的解决方案。
<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;
}
75个字符
我已经尝试了最大宽度,但这打乱了我的布局。
使用max-width: 75ch,然后创建一个布局,当你超过这个宽度时不会乱。
这段代码工作:
.on_table{
table-layout: fixed;
}
.on_tr_td{
border:1px solid grey;
max-width: 20ch;
color: green;
word-break:break-all
}
在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