灵活控制文本显示：单行显示，多行则缩小字体并显示省略号
本文介绍如何巧妙运用CSS和JavaScript，实现文本显示效果的动态调整：单行文本保持原样；多行文本则自动缩小字体和行高；超过两行则隐藏多余部分并显示省略号。
单纯依靠CSS难以完美实现这一需求。虽然line-clamp属性可以限制行数并显示省略号，但它无法根据文本内容自动调整字体大小。如果文本超过一行但未超过两行，line-clamp会直接截断至两行，忽略字体大小的调整。
因此，需要JavaScript的辅助。JavaScript可以计算文本长度或高度，判断是否超过一行或两行。超过一行时，动态添加CSS类名，该类名包含减半的font-size和line-height属性；超过两行时，继续使用该类名，并结合CSS中的overflow: hidden;、text-overflow: ellipsis;、-webkit-line-clamp: 2;和line-clamp: 2;来隐藏多余内容并显示省略号。
立即学习“Java免费学习笔记（深入）”；
这种CSS和JavaScript的组合方式，确保了文本显示效果的精准控制，满足了所有条件。
