对于超出一定行数的内容，很多场景下为了简洁，需要显示 ... (show more) 字样：

现有的方案：

• react-show-more: 基于 react-truncate。后者基于离屏 canvas 及 measureText 方法来判断内容宽度。缺陷是传入的内容只能是纯文本，不能是 HTML node。所以无法搞样式，只能继承父容器的样式。
• react-truncate-markup: 支持传入 HTML node，支持内容带样式。为了使内容带样式，它需要让这些内容实际被渲染出来，再用二分法将 JSX 内容减半，判断是否超出容器高度。重复数次后找到合适的内容量。它的实现原理更佳，而且作者写了大量使用样例，库质量看起来也不错。但它的缺点是，传入的只能是 DOM 元素，不能是 ReactNode；没有实现现成的 show more / show less 开关。官网有提供一个用额外代码实现的 示例。

实测这两种方式都比较纠结。大部分情况下，我是期望能对一个动态生成的 ReactNode 做截断的（因为大多数情况下内容都是动态的），但是 react-show-more 不能有格式（比如 <p>, <br>），react-truncate-markup 不能传 ReactNode，都比较鸡肋。

TODO: 调研这种 JavaScript 的 方案。