背景

一天一个小需求，充实且富有成就。这次ui的小刁难是组件的title按照字数超出显示省略号。

问题

众所周知，css中"text-overflow: ellipsis"在使用时需要设置width,并且ellipsis生效是根据所设置宽度判断的，就是超出设置宽度时才会显示省略号。而这与ui的需求看似相同，实则不同。为此，无法只通过css直接实现。

方案

由于纯css中并没有按照字数显示省略号的属性，所以只能js + css 的方式来解决上述问题。这里依然分为以下三步解决。

根据title字数获得文本长度。这里使用了offsetWidth来获得元素宽度，使用.length获得title长度。前只者用来更细css中宽度，后者用作是否显示省略好的标识。
超过规定字数便为元素添加类名。法一：可以直接使用元素属性。然后使用元素上classList中add方法添加删除元素类名，法二：也可以使用jqery。我这里选择采用法一classList的方法。
将上述添加的类使用ellipsis形成超出显示省略号展现形式。这里只需要使用常用的ellipsis即可，但是需要注意的是with要使用我们步骤一种获得offsetWidth，因为这样才可以尽可能的展示出要求的字数并且显示出省略号。

实现

js核心代码如下所示:

const myEllipsis = (title, count) => {
const isEllipsis = title.length > count; // count: 最大显示字数
const targetEle = document.querySelector('.targetEleName');
const eleWidth = targetEle.offsetWidth;
```
if (isEllipsis) {
    targetEle.classList.add('my-ellipsis');
    targetEle.style.width = eleWidth;
} else {
    targetEle.classList.remove('my-ellipsis');
}
```
}

css核心代码如下:

// 单行情况下
.my-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// 多行情况下
.my-ellipsis {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; // 2: 这里替换成你想要的行数即可
}