文本超出为省略号在很多位置都会用到，作为一个基本样式或者说原子类样式，我们需要知道其实现原理为什么。

使用场景

文字内容过多，超出盒子模型的内容显示为省略号。提示：无论是单行还是多行文本，都需要设置高度，行高，超出不可见。（仅供参考）

文本单行省略

  1. .demo{
  2. white-space:nowrap;（超出不换行，默认为换行的）
  3. text-overflow:ellipsis;（省略号样式）
  4. //代码部分 完整部分
  5. overflow: hidden;
  6. white-space:nowrap;
  7. text-overflow:ellipsis;
  8. }

文本多行省略 (-webkit-)

  1. white-space:normal;（超出宽度换行）
  2. text-overflow: ellipsis; （省略号样式）
  3. -webkit-box-orient: vertical;
  4. -webkit-line-clamp: 3;（行数）
  5. display: -webkit-box;（展示盒子模型类型）
  6. //代码部分(供拷贝)
  7. overflow:hidden;
  8. white-space:normal;
  9. text-overflow: ellipsis; 
  10. -webkit-box-orient: vertical;
  11. -webkit-line-clamp: 3;
  12. display: -webkit-box;

js方案

简单粗暴，根据容器的宽度，文字的字号，进行计算，需要时，文本阶段，然后拼接省略号。

可能缺点：仅仅对中文支持友好，用js解决css的问题并不算优雅

  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>

降级方案1：多行文本截断 ，不需要省略号

特点:对交互要求低，直接按照行高，以及容器的高度，进行截断超出隐藏即可。

降级方案2：伪元素定位固定展示省略号

针对内容肯定超过两行的情况，容器使用after伪元素，定位在内容的最后，没有兼容问题

缺点：1 依赖于必须文本很多，超出两行，否则就会内容不多也出现省略号，不符合需求 2 可能会导致在样式上出现遮盖半个字的情况。

标准解决方案：浮动处理

codepen地址：https://codepen.io/robinson90/pen/PooepVv

原理分析：利用浮动元素的排位处理，当放得下文字时，放到同一行，放不下时，放到下一行。那么只要固定设置这个浮动的伪元素即可。

有 A、B、C 三个盒子，A 左浮动，B、C 右浮动。设置 A 盒子的高度与 B 盒子高度（或最大高度）要保持一致

  1. 当的 B 盒子高度低于 A 盒子，C 盒子仍会处于 B 盒子右下方。
  2. 如果 B 盒子文本过多，高度超过了 A 盒子，则 C 盒子不会停留在右下方，而是掉到了 A 盒子下。
  3. 接下来对 C 盒子进行相对定位，将 C 盒子位置向右侧移动 100%，并向左上方向拉回一个 C 盒子的宽高（不然会看不到哟）。这样在文本未溢出时不会看到 C 盒子，在文本溢出时，显示 C 盒子。

image.png

相关开源框架ui组件的效果参考

minui ,以及iview pro都有这个成熟的方案可以参考。

小结

其实关于省略号的样式，你完全可这样考虑。

1 根本不属于核心需求，你可以通过一些产品交互来提示用户这里有更多文字。
2 即使不做任何提示，互联网用户也具有常识，在看不完整内容时，肯定是点进去查看更多的。
3 目前技术上也没有完整的简单可用的兼容方案，同样也没有确定的产品交互方案。常规的做法一般是下面几种：

  • 固定的单行或者多行隐藏，省略号支持就显示，不支持就不显示，但要保证文本截断，显示完整的文字，不能破坏产品的整体布局。（技术的渐进增强方案）
  • 产品交互上，如果想做的更好，可以做类似查看详情跳转新页面查看，展开详情实现展开查看这两种交互，属于常规可用的主流方案。（产品方案）
  • 在数据上做处理，针对可能会在列表页或者摘要部分出现的数据字段，后端做单独的字段，可以提供短标题，或者特定字数的截取固定加省略号文本。（语雀等产品的方案）

参考文章