html中文本折叠问题解决

在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>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容