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

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

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


当前回答

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

其他回答

示例代码:

.limited-text { 空白:nowrap;} 宽度:400 px; 溢出:隐藏; 文本溢出:省略; } <p class="limited-text">我爱你,我爱你。时间和欲望是错误的,是腐败的,是幸福的!</p> .</p

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

这在CSS中是不可能的,你必须使用Javascript。虽然你可以设置p的宽度为30个字符,下一个字母会自动下来,但这不会那么准确,如果字符是大写的,会有所不同。