前言

今天写了一个需求完成这样一个页面的开发：

其中内容区的大小是固定的，但是里面的内容不定有可能很长很长，并且不允许使用滚动条。

想要查看完整内容，需要鼠标移上去通过tooltips展示。

需求看着挺简单的，但是在里面隐藏了一个坑

可以看到最后一行字，被截断了，属实是困扰了我一会儿。

问题排查

我是用css来限制内容区大小的，即

overflow: hidden;

所有很明显就是在这个地方被截断了，了解过浏览器渲染引擎的话，就会知道 overflow: hidden; 相当于裁剪了这部分出来，使用字体就被粗暴的裁断了。

并且这里的逻辑虽然是文本展示，但是会存在一些特殊的效果，同时为了便于维护这里实际上是多个包含文本的div组成的。

问题解决

那我怎么处理这种文本截断的问题呢？在包含了多个块级文本的情况下

我想到了几种思路，比如借助canvas，或者直接使用js去计算等。

但是代价有点太大了。

最后决定使用数学的方式来处理：

比如这个图

我将每一个行的最小单位定为20px，像这行就是20px，其中文字占15px空白占5px

这样的好处是什么？

将每一行都规范的定为一样的高度，一样的空行之后，我们就可以算出一个绝对不会被截断的高度

比如我选择的高度是395-400px，然后我每一行最少20px，并且余下5px的空行，当我采用这个高度时就肯定不会被截断，因为这间隔的5px和我每一行余下的5px刚好重合，就能避免文本截断的问题

可惜这种方法的局限性比较大，读者遇到了就考虑一下要不要尝试