前端开发中,文本单行或多行溢出使用省略号显示

1.文本单行溢出使用省略号显示

关键代码如下:

        .box1{
            width: 200px;
            height: 30px;
            line-height: 30px;
            margin: 0 auto;
            background-color: rgba(220, 220, 220, 0.751);
            /* 单行文本超出隐藏 用省略号代替 */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

2.文本多行溢出使用省略号显示

关键代码如下:

        .box2{
            width: 200px;
            height: 60px;
            line-height: 30px;
            margin: 0 auto;
            background-color: rgba(220, 220, 220, 0.751);
             /* 多行文本超出隐藏 用省略号代替 */
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
总结:以上就是处理文本溢出使用省略号显示的方法,希望对大家有所帮助!

猜你喜欢

转载自blog.csdn.net/hu_666666/article/details/132914626