css单行与多行文本溢出以省略号收尾

最新推荐文章于 2023-03-23 21:21:43 发布

weixin_43370067

最新推荐文章于 2023-03-23 21:21:43 发布

阅读量102

点赞数

本文链接：https://blog.csdn.net/weixin_43370067/article/details/105731097

版权

单行文本溢出部分加省略号

在这里插入图片描述
英文字母+数字溢出不换行(默认)


        .dv1 {
            width: 200px;
            border: 1px solid #000;
            /* 不换行 */
            white-space: nowrap;
            /* 盒子溢出隐藏 */
            overflow: hidden;
            /* 文字溢出加省略号 */
            text-overflow: ellipsis;

        }

多行文本溢出加省略号

方法一

在这里插入图片描述

.dv2 {
            width: 200px;
            border: 1px solid #000;
            /* 盒子溢出隐藏 */
            overflow: hidden;
            /* 文字溢出省略号 */
            text-overflow: ellipsis;
            /* 声明伸缩盒子 可以控制盒子内部文字的显示行数和方向 */
            display: -webkit-box;
            /* 显示两行溢出 */
            -webkit-line-clamp:2 ;
        /* 文字一行一行垂直显示 */
        -webkit-box-orient:vertical ;

        }

这个方法有浏览器的局限性，因为是需要webkit内核
有Google浏览器支持

方法二

在这里插入图片描述


```/* 伪元素的方法给文字盒子末尾+... */
        .dv3 {
            position: relative;
            width: 200px;
            /* 固定盒子高度 */
            height: 60px;
            /* 行高与高度呈现倍数关系 */
            line-height: 30px;
            border: 1px solid #888;
            overflow: hidden;
        }

        .dv3::after {
            position: absolute;
            right: 0;
            bottom: 0;
            content: '...';
            padding-left: 8px;
            /* 透明色到白色的渐变  盖住最后一个字 用省略号结尾*/
            background: linear-gradient(to left,transparent,#fff 31%);

        }