css文本超出隐藏 显示三个点

Posted 李守聪

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css文本超出隐藏 显示三个点相关的知识,希望对你有一定的参考价值。

文本超出显示三个点一般分两种情况

  一,单行文本超出隐藏

   overflow:hidden;

   text-overflow:ellipsis;

   white-space:nowrap;

  二,多行文本超出隐藏

    text-overflow: -o-ellipsis-lastline;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 3; //行数需设置

    line-clamp: 3;

    -webkit-box-orient: vertical;(不生效的话可以在-webkit-box-orient: vertical;上面加这一行注释 /* autoprefixer: ignore next */ 这是因为-webkit-box-orient: vertical;被过滤掉了 autoprefixer 这个关键字可以免除被过滤的动作 )

单行设置宽 多行设置宽高不然不会生效

以上是关于css文本超出隐藏 显示三个点的主要内容,如果未能解决你的问题,请参考以下文章

CSS文本超出2行就隐藏并且显示省略号

多行文本超出设置行就隐藏并且显示省略号

怎么实现CSS限制字数,超出部份显示点点点

css设置文本超过宽度后显示省略号点点点#yyds干货盘点#

css 文本超出就隐藏并且显示省略号

css文本超出隐藏显示省略号