我正在为学校做响应式网站,我的问题是:

我如何在我的网站上设置句子的最大字符长度(用CSS)(比如75个字符),当我有一个非常大的屏幕时,句子不会超过75个字符。

我已经尝试了最大宽度,但这打乱了我的布局。我使用flexbox和媒体查询,使其响应。


当前回答

75个字符

我已经尝试了最大宽度,但这打乱了我的布局。

使用max-width: 75ch,然后创建一个布局,当你超过这个宽度时不会乱。

其他回答

75个字符

我已经尝试了最大宽度,但这打乱了我的布局。

使用max-width: 75ch,然后创建一个布局,当你超过这个宽度时不会乱。

尝试在设置为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个字符,下一个字母会自动下来,但这不会那么准确,如果字符是大写的,会有所不同。

您总是可以通过设置max-width和溢出省略号来使用截断方法

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

一个例子:

.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; } <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>

对于多行截断,请查看flex解决方案。 一个截断3行的示例。

p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

一个例子:

p { 空白:无换行; 溢出:隐藏; 文本溢出:省略号; 最大宽度:200px; } <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Deserunt rem odit quis quaerat.In dolorem praesentium velit ea esse consequuntur fugit sequi voluptas ut possimus voluptatibus deserunt nisi eveniet!</p>

在所有浏览器中完全支持。