网页文本溢出的几种处理方法汇总

网页中一段文字过长难免会超出预期范围,同时随着H5响应式网页设计的普及,网页文本溢出成了前端开发中的家常便饭。这篇笔记波波主要总结常用的几种网页文本溢出时的处理方法,做前端的朋友们可以收藏一下。

网页文本溢出的几种处理方法汇总

一、overflow: hidden

对于单行文本溢出,大家最常用的就是overflow: hidden,用法简单。核心样式:

  1. overflowhidden;(文字长度超出限定宽度,则隐藏超出的内容)
  2. whitewhite-spacenowrap;(设置文字在一行显示,不能换行)
  3. text-overflow: ellipsis;(规定当文本溢出时,显示省略符号来代表被修剪的文本)

二、-webkit-line-clamp

对于多行文本溢出,大家常用的处理方法是-webkit-line-clamp,但是偶尔会有兼容性问题,核心样式:

  1. -webkit-line-clamp: 2;(用来限制在一个块元素显示的文本的行数, 2 表示最多显示 2 行。 为了实现该效果,它需要组合其他的WebKit属性)
  2. display: -webkit-box;(和 1 结合使用,将对象作为弹性伸缩盒子模型显示 )
  3. -webkit-box-orient: vertical;(和 1 结合使用 ,设置或检索伸缩盒对象的子元素的排列方式 )
  4. overflowhidden;(文本溢出限定的宽度就隐藏内容)
  5. text-overflow: ellipsis;(多行文本的情况下,用省略号“…”隐藏溢出范围的文本)

三、JS处理

这种方式兼容性比较好,就是代码感觉写的可能稍多。示例如下:

  1. <script type="text/javascript">
  2.     const text = '这是一段很长的文本';
  3.     const totalTextLen = text.length;
  4.     const formatStr = () => {
  5.         const ele = document.getElementsByClassName('demo')[0];
  6.         const lineNum = 2;
  7.         const baseWidth = window.getComputedStyle(ele).width;
  8.         const baseFontSize = window.getComputedStyle(ele).fontSize;
  9.         const lineWidth = +baseWidth.slice(0, -2);
  10.         // 所计算的strNum为元素内部一行可容纳的字数(不区分中英文)
  11.         const strNum = Math.floor(lineWidth / +baseFontSize.slice(0, -2));
  12.         let content = '';
  13.         // 多行可容纳总字数
  14.         const totalStrNum = Math.floor(strNum * lineNum);
  15.         const lastIndex = totalStrNum - totalTextLen;
  16.         if (totalTextLen > totalStrNum) {
  17.             content = text.slice(0, lastIndex - 3).concat('...');
  18.         } else {
  19.             content = text;
  20.         }
  21.         ele.innerHTML = content;
  22.     }
  23.     formatStr();
  24.         window.onresize = () => {
  25.         formatStr();
  26.     };
  27. </script>
  28. <body>
  29.     <div class='demo'></div>
  30. </body>

当然了问题的处理方式并不仅限于以上三种,

 

波波
你想把广告放到这里吗?

发表评论

您必须 登录 才能发表留言!