计算文本显示了多少行？

作者站长头像
站长
· 阅读数 13

问题背景： 显示一段文本，如果文本超过十行显示展开，收起按钮，按钮占一整行。文本有换行符。问题：怎么计算文本实际占多少行。

尝试：使用z-index= -1先显示文本，计算文本高度。大于一个固定高度高度来判断。是否超过十行。疑问：

 1.中文和英文的文本高度不一样，固定高度不准确。
 2.z-index = -1 来计算觉得要显示两遍文本信息
回复
1个回答
avatar
test
2024-06-19

你的思路没有错，

  1. 主动设定好文本区域的line-height，就避开了高度计算不准确的问题。
  2. 使用一个独立隐藏区域输出文本（visibility为hidden，绝对定位，将位置设定到可视区域外，比如 top -9999px)，计算高度，除以 line-height得到行数。
  3. 然后在正式展示区域按照计算的行数进行条件展示。
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容