前端

css文本超出隐藏

字数：222 阅读时长：1分钟 阅读：85

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

css3

单行文本超出隐藏

1
2
3
4
5
.text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

多行文本超出隐藏

1
2
3
4
5
6
7
.box {
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

VantUI中内置的文字省略方法

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 最多显示一行 -->
<div class="van-ellipsis">这是一段最多显示一行的文字，多余的内容会被省略</div>

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

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

欢迎访问：天问博客

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