美文网首页
文本溢出的解决方案

文本溢出的解决方案

作者: JacobMa1996 | 来源:发表于2017-01-17 14:22 被阅读0次

    单行文本溢出

    text-overflow属性:clip,ellipsis,string
    常用text-overflow:ellipsis省略号

    .textOverflow{
            width: 200px;
            text-overflow: ellipsis;/*多余文本省略号代替*/
            overflow: hidden;/*多余部分隐藏*/
            white-space: nowrap;/*禁止换行*/
        }
    

    多行文本溢出

    .textOverflow{
            width: 200px;
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;/*行数n*/
            -webkit-box-orient: vertical;
        }
    

    还有其他方法

    2018/01/08 更新
    需要做到兼容(PC端Chrome,FF,UC,Edge,IE等)

    .feedTxtAfter::after {
            content: "..."; 
            position: absolute; 
            bottom: 0; 
            right: 0; 
            padding-left: 15px;
            padding-right: 3px;
            padding-bottom: 3px;
            background: -webkit-linear-gradient(left, transparent, #f8f8f8 55%);
            background: -o-linear-gradient(right, transparent, #f8f8f8 55%);
            background: -moz-linear-gradient(right, transparent, #f8f8f8 55%);
            background: linear-gradient(to right, transparent, #f8f8f8 55%);
        }
    

    利用CSS的渐变属性和伪类after的content属性,与父元素进行相对绝对定位,添加省略号

    在JS中,用固定行数的内容元素的高度来获取是否超出行数:

    if ($('.feedTxt').length) {
            var _feedTxt = $('.feedTxt');
            for (var i = 0; i < _feedTxt.length; i++) {
                if ($(_feedTxt[i]).height() == '72') {
                    $(_feedTxt[i]).addClass('feedTxtAfter');
                }
            }
        }
    

    相关文章

      网友评论

          本文标题:文本溢出的解决方案

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