前端实现展开效果

前言

一图胜千言~，王者荣耀微信区百里守约请求出栈~

缘起是因8月初做的需求，其中里面涉及到了文字的点击展开效果，看起来很简单，但因为要兼容ie所以做起来可真的费点劲~，现要求超出两行有省略和展示文字出现，就像这样：

实现方式

1. 实现方式1：

• getClientRects() 我在网上也搜索了一些方案，没有太满意的，有一些使用样式控制的，比较靠谱的就是getClientRects()，但有缺点首先页面必须渲染完毕，之后获取dom元素，再使用调用方法来获取当前行数，这时可以通过减少当前的字符串长度来重新计算，直到行数小于2行超出省略。 但我没有用这种方式，因为循环列表涉及到ref，每次渲染都会放入ref数组，也就没使用，但可以达到目标效果。

• 代码

  <div >
    <span class="txt">
      我是一个小文本， 我是一个小文本，
      我是一个小文本 我是一个小文本，
      我是一个小文本 我是一个小文本，
      我是一个小文本 我是一个小文本，
      我是一个小文本 我是一个小文本，
      我是一个小文本
      我是一个小文本
     </span>
  </div>
   <script>
    let res = document.querySelector(".txt").getClientRects();
    console.log('res', res);
   </script>
</body>

2.方式2的想法就是计算当前文字内容的长度，与容器的长度进行比较，因为是超出两行显示展示，所以容器的长度需要乘以2。那如何获取当前文字内容的长度呢？开始是自己计算文字长度，计算不准确，后在网上搜索到了个方法，用此方法可精确计算当前内容区的宽度，即可实现效果：

/**
* 获取文本px宽度
* @param font{String}: 字体样式
**/
String.prototype.pxWidth = function(font) {
  // re-use canvas object for better performance
  var canvas = String.prototype.pxWidth.canvas || (String.prototype.pxWidth.canvas = document.createElement("canvas")),
      context = canvas.getContext("2d"); 

  font && (context.font = font);
  var metrics = context.measureText(this);

  return metrics.width;
}

最后

想贴出自己的代码的，看看有人看没，有人要再贴出来吧。其实最好的实现方式用css来实现性能会高一点。