美文网首页
html中文本折叠问题解决

html中文本折叠问题解决

作者: 小疯伊始 | 来源:发表于2022-05-22 11:26 被阅读0次

    在html中,文本过长是经常遇到的问题,解决过程中有不同场景,不同的解决方法。

    单文本

    el{
      width: {自己长度};
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    

    多文本

    el{
      height: 100px;
      line-height: 20px;
      overflow: hidden;
    }
    

    万能js解决

    在node中

    str 为自己文本, limit 为自己需要的长度 ,在react中使用特别有效

    { (str.length > limit) ?  ((str.substring(0, len(str) - limit)) + '...') :  str }
    

    正常hmtl中

    <html>
        <head>
            <script type="text/javascript">
                //加载html结束后再执行js
                 document.addEventListener('DOMContentLoaded', function() {
                    var elemArr = document.getElementsByClassName("txt-10");
                    for (const elem of elemArr) {
                        txt = elem.innerHTML
                        l = txt.length
                        if (l > 10) {
                                var sub = txt.substring(0, 10)
                                sub = sub + " ..."
                                elem.innerHTML = sub
                        }
                    } 
                });
                
            </script>
        </head>
        <body>
            <div class="txt-10">abcdefghijklmnopqrs</div>
            <div class="txt-10">abcdefghijklmnopqrstttttt</div>
        </body>
    </html>
    

    相关文章

      网友评论

          本文标题:html中文本折叠问题解决

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