在 CSS 中设置最大字符长度

Question

我正在为学校制作响应式网站，我的问题是：

如何在我的网站上设置句子（使用 CSS）的最大字符长度（例如 75 个字符），当我有一个非常大的屏幕时，句子不会超过 75 个字符。

我尝试了最大宽度，但这弄乱了我的布局。我正在使用 flexbox 和媒体查询来使其响应。

原文由 Sharif1111 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您始终可以通过设置 max-width 和溢出 ellipsis 来使用截断方法，就像这样

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 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt rem odit quis quaerat. In dolorem praesentium velit ea esse consequuntur cum fugit sequi voluptas ut possimus voluptatibus deserunt nisi eveniet!</p>

原文由 Vangel Tzo 发布，翻译遵循 CC BY-SA 4.0 许可协议