css文本超出隐藏

记录一下 css 中常用的单行文本超出隐藏、多行文本超出隐藏的方法。

单行文本超出隐藏

.text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

多行文本超出隐藏

.box {
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

VantUI中内置的文字省略方法

<!-- 最多显示一行 -->
<div class="van-ellipsis">这是一段最多显示一行的文字，多余的内容会被省略</div>

<!-- 最多显示两行 -->
<div class="van-multi-ellipsis--l2">
  这是一段最多显示两行的文字，多余的内容会被省略
</div>

<!-- 最多显示三行 -->
<div class="van-multi-ellipsis--l3">
  这是一段最多显示三行的文字，多余的内容会被省略
</div>

---

欢迎访问：天问博客

本文作者： Tiven
发布时间： 2023-02-05
最后更新： 2023-07-17
本文标题： css文本超出隐藏
本文链接： https://www.tiven.cn/p/c1b24445/
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！