美文网首页
文本溢出显示省略号

文本溢出显示省略号

作者: 糖糖_2c32 | 来源:发表于2022-01-26 15:53 被阅读0次
            /* 单行文本溢出显示省略号 */
            .text {
                /* 1、强制一行显示文本 */
                white-space: nowrap;
                /* 2、超出部分隐藏 */
                overflow: hidden;
                /* 3、文字用省略号替代超出的部分 */
                text-overflow: ellipsis;
            }
    
            /* 多行文本溢出显示省略号  适用于webkit浏览器或移动端 */
            .text {
                overflow: hidden;
                text-overflow: ellipsis;
                /* 弹性伸缩盒子模型显示 */
                display: -webkit-box;
                /* 限制在一个块元素显示的文本的行数 */
                -webkit-line-clamp: 2;
                /* 设置或检索伸缩盒对象的子元素的排列方式 */
                -webkit-box-orient: vertical;
    

    相关文章

      网友评论

          本文标题:文本溢出显示省略号

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