我正在为学校做响应式网站,我的问题是:
我如何在我的网站上设置句子的最大字符长度(用CSS)(比如75个字符),当我有一个非常大的屏幕时,句子不会超过75个字符。
我已经尝试了最大宽度,但这打乱了我的布局。我使用flexbox和媒体查询,使其响应。
我正在为学校做响应式网站,我的问题是:
我如何在我的网站上设置句子的最大字符长度(用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...
杰斯菲德尔
尝试在设置为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网页。
用两种不同的方法试试我的解决方案。
<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;
}
这在CSS中是不可能的,你必须使用Javascript。虽然你可以设置p的宽度为30个字符,下一个字母会自动下来,但这不会那么准确,如果字符是大写的,会有所不同。
75个字符
我已经尝试了最大宽度,但这打乱了我的布局。
使用max-width: 75ch,然后创建一个布局,当你超过这个宽度时不会乱。