css - 如何使用文本溢出:ellipsis for 3 line truncate?

标签 css

如何在 CSS 中使用省略号在 3 行而不是 1 行文本后截断?

到目前为止我有这个,但它只适用于单行文本。我希望文本换行两次(引用)。

.truncate {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

最佳答案

这还不能在所有的 css3 浏览器中完成,只有 webkit。

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
}

我使用 clamp.js如果我真的需要截断

关于css - 如何使用文本溢出:ellipsis for 3 line truncate?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16846390/

相关文章:

javascript - 滚动 100vh 后的 Bloc 滚动顶部

javascript - 在 Bootstrap 模式中错误地显示 d3.js

html - 缩放 CSS 过渡取消其他样式

html - 在不同的行上显示 radio 输入,但将文本与 radio 选择器保持在同一行

css - 在 javafx 中创建类似 opera 的选项卡

css - 用 div 包裹后图像无法居中?网页格式

html - 与高度混淆 :auto

css - Re-Captcha 样式修复仅通过开发人员工具工作

html - Bootstrap : Buttons in a row with no gap between

css - Firefox HTML 检查器,使用自定义选择器添加新的 css 规则