美文网首页
HTML文本溢出隐藏

HTML文本溢出隐藏

作者: visitor009 | 来源:发表于2018-10-20 11:35 被阅读0次

    单行文本

    通用

     p {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
     }
    

    多行文本

    适用于webkit内核,移动端

    p {
       display: -webkit-box;
       text-overflow: ellipsis;
       overflow : hidden;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
    }
    

    多行文本js隐藏

    通用

    // css
    #text {
         width: 300px;
         border: 1px solid #000;
         font-size: 20px;
    }
    // html
    <p id="text">一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,</p>
    // js
    function ellipsis(parent, num) {
        let elem = document.querySelector(parent);
        let text = elem.innerHTML;
        let style = getComputedStyle(elem,null);
        let testElem = document.createElement('span');
        testElem.innerHTML = text.slice(0,1);
        testElem.style.cssText = `position:absolute;font-size:${style.fontSize};opacity: 0`;
        document.body.appendChild(testElem);
    
        let line = Number.parseInt(style.width) / testElem.offsetWidth;
        let totalLine = text.length / line;
    
        if (totalLine >= num) {
            text = text.slice(0, line * num).split('');
            text[text.length - 1] = '...';
            text = text.join('')
            elem.innerHTML = text;
        }
        document.body.removeChild(testElem);
    }
    ellipsis('#text',2);
    

    一行 = 总宽度 / 单个字符宽度 = x 个/行
    总字数 / x = 总行
    但是中文、数字和英文的单个字符的宽度是不相等的,所以中英数混合下会不正确;默认以第一个字符为参考

    相关文章

      网友评论

          本文标题:HTML文本溢出隐藏

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