美文网首页
CSS实现单行、多行文本溢出显示省略号(…)

CSS实现单行、多行文本溢出显示省略号(…)

作者: web小哥MrYang | 来源:发表于2019-08-28 11:24 被阅读0次

    /*单行溢出*/

    overflow: hidden;

    -o-text-overflow: ellipsis;//最主要

    text-overflow: ellipsis;//最主要

    width: 90%;

    display: block;

    /*单行溢出*/

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

    /*多行溢出 手机端使用*/

    .txt-cut{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical}

    text-overflow 规定当文本溢出包含元素时的显示,有两个固定值,分别是clip和ellipsis,也可直接传字符串string:

    clip :默认值 。不显示省略标记(…),而是简单的裁切;

    ellipsis: 当对象内文本溢出时显示省略标记(…);

    string:使用给定的字符串来代表被修剪的文本。

    使用text-overflow:ellipsis时要注意一下两点:

    1.overflow: hidden; text-overflow:ellipsis;white-space:nowrap;这三个一定要一起用,如果少了white-space:nowrap,文字会把撑高容器的高度,导致替换字符显示不出来;如果少了overflow: hidden,文字会横向撑到容器的外面;

    2.一定要给容器定义宽度。

    相关文章

      网友评论

          本文标题:CSS实现单行、多行文本溢出显示省略号(…)

          本文链接:https://www.haomeiwen.com/subject/rbhpectx.html