css文本超出隐藏 - 天问博客

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

css3

单行文本超出隐藏

.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>

欢迎访问：天问博客

目录