巧妙实现文本"不定行数"截断

巧妙实现文本"不定行数"截断

摘要

偶然发现，在某乎热榜页有一个很有意思的布局，这里的标题会制约内容的行数，所以文本超出是不定行的。详细规则如下：

1. 整个容器高度是固定的，标题和内容总共 3 行
2. 标题最多2行，超出省略
3. 内容由剩余空间决定，如果标题占2行，则内容超出1行省略；如果标题占1行，则内容超出2行省略

是不是很灵（离）活（谱）的交互？可以充分利用页面空间，保证标题和内容都能展示出来。