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

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

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

一、overflow: hidden

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

  1. overflow: hidden；（文字长度超出限定宽度，则隐藏超出的内容）
  2. whitewhite-space: nowrap；（设置文字在一行显示，不能换行）
  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. overflow: hidden；（文本溢出限定的宽度就隐藏内容）
  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);
  11.         // 所计算的strNum为元素内部一行可容纳的字数(不区分中英文)
  12.         const strNum = Math.floor(lineWidth / +baseFontSize.slice(0, -2));
  14.         let content = '';
  16.         // 多行可容纳总字数
  17.         const totalStrNum = Math.floor(strNum * lineNum);
  19.         const lastIndex = totalStrNum - totalTextLen;
  21.         if (totalTextLen > totalStrNum) {
  22.             content = text.slice(0, lastIndex - 3).concat('...');
  23.         } else {
  24.             content = text;
  25.         }
  26.         ele.innerHTML = content;
  27.     }
  29.     formatStr();
  31.         window.onresize = () => {
  32.         formatStr();
  33.     };
  34. </script>
  36. <body>
  37.     <div class='demo'></div>
  38. </body>

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

 

你想把广告放到这里吗？

发表评论

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