js多行文本组件封装

在项目中，经常会遇到文本超出问题，通常的解决办法是超出显示省略号，要么手动截取文本，要么设置css样式。在此我封装了一个组件可以自动使多行文本超出部分显示为省略号，本文主要记录了思路，如果嫌我废话太多可直接下拉至最后代码（简书竟然不能设置锚点真是...）。

常用到的单行文本超出解决办法：

{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space:nowrap;
}

我本以为text-overflow也可以设置多行文本，于是最开始的思路就是用元素的line-height 乘以设置的行数rows，得到高度，然后手动设置元素高度，超出部分自动显示省略号岂不是美滋滋，就可以拿去跟同事装逼了，UI妹子可能就会多看我一眼了。没想到刚一出马就遇到了问题，element.style的方式是取不到css设置的样式的。要使用如下方法（我没做IE兼容）

  /* 
    element:你的元素，
    attribute:css样式名,驼峰形式
  */
  /*非IE浏览器*/ 
  window.getComputedStyle(element)[attribute]
  /*IE浏览器 */ 
  element.currentStyle[attribute]

但是我太高估了text-overflow，这种思路可以实现文字截取，但是不会自动出现省略号。

于是我决定集百家之众长，不能闭(dan)门(wu)造(zhuang)车(bi)，就去百度了一下，发现webkit内核的浏览器可以直接用css样式设置多行文本超出部门自动显示省略号，如下所示

  /*webkit-line-clamp设置行数即可*/
  {
    display:-webkit-box;
    webkit-line-clamp: 2;
    webkit-box-orient: vertical;
  }  

我不禁痛心疾首，感觉自己全做了无用功，再也得不到UI妹子的爱了 ，但是转念一想，那非webkit内核的浏览器怎么办，于是决定写一个兼容的方法。

最开始的思路是，根据字体大小和元素宽度，取到单行字数，即设定行数时可以得到元素能容纳的字数，这样做文本截取即可，试验后发现不同字符的占宽明显不同，比如单个汉字就明显比单个字母或者数字占宽要大，思路流产。

后来转念一想，既然我可以拿到实时高度，我何不每次删一个字符就算一遍高度。我可以拿到设定行数和行高，所以可以拿到最终呈现的元素的高度，这样每次拿实时的高度与此高度进行比较，若实时高度不大于最终高度，即可实现文字截取，此时我在尾部添加一个省略号岂不美哉。试验了一下发现可行，即为最终方案，代码如下
html部分

  <div   
    class="jc-textBox"
    rows="1"
    style="width:100px"
  >
    111111111111111111111111111111111111111
  </div>
  <div   
    class="jc-textBox"
    rows="3"
    style="width:100px"
  >
    啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
  </div>
  <div   
    class="jc-textBox"
    rows="3"
    style="width:100px"
  >
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  </div>

css部分

  .jc-textBox {
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
  }

js部分

  let textBoxs = $('.jc-textBox'),
      tbLength = textBoxs.length;
  
  //获取元素的当前样式
  const getCurrentStyle = (element,attribute) => {
    return window.getComputedStyle(element)[attribute];
  }

  
  //获取当前行数设置下的最大高度
  const getMaxHeight = (element,rows) => {
    let lineHeight = getCurrentStyle(element,'lineHeight');
    let number = 0;
    if(lineHeight === 'normal'){
      let fontSize = getCurrentStyle(element,'fontSize');
      number = getNumber(fontSize) * 1.2;
    }else {
      number = getNumber(lineHeight);
    }
    return number * rows;
  }

  //当元素的现有高度大于最大高度时，就删除字符，直到现有高度不大于最大高度
  const removeLastChar = (element,maxHeight) => {
    let end = false;
    let text = element.innerText;
    let textArr = text.split('');
    while(!end){
      textArr.pop();
      let newText = textArr.join('');
      element.innerText = newText + '...';
      let currentHeight =getCurrentStyle(element,'height');
      currentHeight = getNumber(currentHeight);
      if(currentHeight <= maxHeight){
        end = true;
      }
    }
  }

  //获取属性中的数字
  const getNumber = (str) => {
    let number = parseFloat(str);
    number = Math.ceil(number);
    return number;
  } 

  for(let i = 0;i<tbLength;i++){
    let textBox = textBoxs[i];
    let  options = {
      rows: parseInt(textBox.getAttribute('rows')),
      isSupportLineClamp: typeof(textBox.style.webkitLineClamp) != 'undefined',
    }
    textBox.title = textBox.innerText;
    let rows = options.rows;
    let maxHeight = getMaxHeight(textBox,rows);
    if(options.isSupportLineClamp){
      textBox.style.webkitLineClamp = rows;
      textBox.style.display = '-webkit-box';
      textBox.style.webkitBoxOrient = 'vertical';
    }else {
      let height = getCurrentStyle(textBox,'height');
      height = getNumber(height);
      if(height > maxHeight){
        removeLastChar(textBox,maxHeight);
      }
    }
  }

测试效果
chrome

chrome-textbox.png

firefox

firefox-textbox.png

注：firefox默认样式时中文的行高乘行数不等于元素高度，至今不知道为啥，可以通过显式的设置line-height或者改变font-family来解决，我用了第一种办法。

好了，我要去装逼了。