超过若干行显示更多

[semi-xi]

需求情况

经常在开发需求的过程中，对于描述过长的时候，产品都会提一个需求说是希望超过若干行之后显示...并且显示更多按钮， 更甚至最近接到一个需求是，当行数超过3行半的时候显示更多按钮

已有的问题

在css里面，可以做到的是超过若干行之后隐藏

function maxLine ($fontSize, $lineHeight, $line) {
  font-size: $fontSize;
  line-height: $lineHeight;
  max-height: $line * $lineHeight;
  overflow: hiiden;
}

或者是超过若干行之后出现省略号

function MaxLineEllipsis ($line) {
  overflow: hidden; 
  text-overflow: ellipsis;
  display: -webkit-box; 
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line; 
}

但是没有办法知道，当前已经多少行了，以及相应的处理

解决办法

方法1

如果知道当前宽度，以及当前字体的大小的话，可以算是一行可以容纳多少个字，然后匹配字符串中的单字节字符跟双字节字符，从而大概算出会有多少行

双字节字符匹配: [^\x00-\xff]

  const width = 100
  const fontSize = 24
  const line = 3.5
  var maxLen = width / fontSize * line
  var cnReg = /[^\x00-\xff]/ig
  var cnStr = ''
  var cnLen = 0
  var enStr = productDesc.replace(cnReg, (item) => {
        cnStr += item
        return ''
      })
  var enLen = 0

  cnLen = cnStr.length * 2
  enLen = cnStr.length
  if ((cnLen + enLen) > lineLen) { // 超过函数

  }

方法2

getBoundingClientRect

var span = document.documentElement.querySelector('#span');
var rect = span.getBoundingClientRect();
var width = rect.right-rect.left;