IM应用中如何计算富文本的高度

背景

在开发IM的项目过程中，经常会有出现一些需要计算DOM高度，然后超出若干行隐藏等需求。很多时候，需要计算高度的DOM元素都是动态生成的，我们无法在数据渲染前获取到它的高度。

如果没有任何交互，我们可以通过CSS来实现这个需求。但是，如果我们需要使用JavaScript来实现一些交互（比如消息渲染时，超过2行显示某个特定按钮等），则只能通过JavaScript来进行实现。我在这里介绍一种通过JavaScript来对元素高度进行计算的方法，希望能够给大家提供一些思路。

技术方案

根据前端的基本常识，在内存中未渲染的DOM元素是无法获取到高度的，因此我们有两个方向来解决这个难题：

1. 通过字数对行数进行估算。

2. 将元素渲染后进行高度测算 。

实现方案

以下的实现方案将根据上面所选择的技术方案来进行实现。

通过字数进行估算

方案

此方案无需多言，就是通过字的总数、行高和每一行能够容下的字的个数进行估算等。在项目最开始时，我采用的就是这个方案。具体实现代码较为简单，因此不在本文中提供示例。

优点

此方案实现简单，基本不需要任何技术成本。

缺点

只适用于等宽文字，如果出现富文本（比如有emoji或者图片表情等高度不一致）的情况，则无法适用。如果字体为非等宽字体或者存在\n之类的换行符或者是\t之类的制表符时，估算的准确度也会下降。

在DOM渲染后进行操作

方案

顾名思义，此方案就是先不考虑DOM元素行数逻辑ÿ