css处理超出指定数的文字的时候剩下的变成省略号

相信前端朋友都知道如何让超出文本变成省略号，不管是单行还是多行估计都难不倒大家。

如果不会多行超出文本变成省略号的可看笔者的这篇博客：多行文本溢出变成省略号【附带失效解决代码】

但是我们之前都是设置的固定多少px宽度然后让他超出那个宽度换行，现在的需求改为了超过二十个字或者十五个字的时候才开始变成省略号，那我们怎么办呢？

笔者之前开发的时候的解决办法是用js处理，判断多少个字了，如果到多少字剩下的就截取掉替换为…。然后把原文本用tooltip的形式展示。

但是笔者怎么想都感觉用css不太爽，那么我们怎么办呢？
笔者先透漏一个小关键点：em单位
我们写一个公共的css样式：

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

注意哦，这是一个公共样式，所以我们给它设置width不太好，当然了，你也可以设置一个公共的宽度。无所谓。

而后当我们使用他的时候给那个元素或者组件加入一个行内样式的宽度即可。这样就很灵活。【在上面样式也样式也会被我们的行内样式覆盖，行内样式的权重更高。不懂样式权重的可自行百度】。

接下来写个想要在第二十个文字的时候变成省略号，那么就这样：

<p class="overflowEllipsisStyle" style="width: 20em">
    一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十
</p>

备注：
如果想要第二十个字还展示的话那就设置21em。
1em相当于是一个字的宽度。

效果如下：