巧妙运用CSS和JavaScript实现文本自适应显示：单行不变，多行缩小字号并显示省略号
本文介绍如何通过CSS和JavaScript的结合，实现文本显示的动态控制：单行文本保持原样；多行文本则字体大小和行高减半；超过两行则隐藏多余部分并显示省略号。
问题：如何根据文本长度自动调整样式？单纯依靠CSS无法实现此效果。
解决方案：需要JavaScript动态判断文本行数并调整CSS样式。
立即学习“Java免费学习笔记（深入）”；
实现步骤：
-
JavaScript判断文本行数: 创建一个临时元素，将文本内容放入其中，通过读取
offsetHeight和lineHeight属性计算行数。 -
动态添加类名: 根据计算出的行数，为目标元素（例如，class为
content的元素）动态添加不同的类名。例如，超过一行添加multi-line类；超过两行添加overflow-two-lines类。 -
CSS样式控制: 分别为
multi-line和overflow-two-lines类定义CSS样式：multi-line类将字体大小和行高减半；overflow-two-lines类在此基础上，添加overflow: hidden;,text-overflow: ellipsis;,-webkit-line-clamp: 2;,line-clamp: 2;等属性，实现文本截断和省略号显示。
通过以上步骤，即可实现文本长度与样式的动态关联，完美解决仅用CSS无法实现的动态调整问题。 这需要CSS样式和JavaScript动态判断的协同工作。
