网页文本行数精准统计与动态显示
动态调整网页布局，常需根据文本长度判断是否显示“展开/收起”按钮。然而，直接通过文本高度判断行数，因中英文高度差异及效率问题而不可靠。本文提供一种更精准的文本行数计算方法。
挑战：准确计算包含换行符的文本行数
目标：页面文本超过十行则显示“展开/收起”按钮（按钮占一行）。文本包含换行符，如何准确计算实际行数？
传统方法的不足：
最初方案：先隐藏渲染文本，再计算高度，根据高度判断行数。但此法存在两大缺陷：中英文高度差异导致预设高度难以精确；两次渲染降低效率。
高效解决方案：
-
统一行高： 设置文本区域
line-height属性，确保每行高度一致，消除中英文高度差异的影响。 -
隐藏区域计算： 创建一个隐藏区域（例如，使用
visibility: hidden和绝对定位将元素移出可视区域），在该区域渲染文本。获取隐藏区域高度，除以预设line-height值，即可得到精确行数。 -
条件渲染： 根据计算出的行数，有条件地在显示区域显示文本和“展开/收起”按钮。
此方法避免了文本内容差异和重复渲染带来的问题，实现高效精准的文本行数计算，从而灵活高效地控制页面布局。
