CSS与JS文本单行多行显示及省略号技巧

本文详解如何使用CSS和JavaScript实现文本单行、多行及省略号的灵活显示效果。 区别于仅用CSS的`line-clamp`属性的局限性（无法根据文本内容调整字体大小），本文提供一种更完善的方案：通过JavaScript判断文本行数，动态调整字体大小和行高，并结合CSS的`overflow`、`text-overflow`和`line-clamp`属性，精准控制多行文本的显示，在超过两行时自动显示省略号，从而实现完美的文本显示效果。 这篇文章将详细讲解实现方法及代码示例，助你轻松掌握这项技巧。

灵活控制文本显示：单行显示，多行则缩小字体并显示省略号

本文介绍如何巧妙运用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;来隐藏多余内容并显示省略号。

这种CSS和JavaScript的组合方式，确保了文本显示效果的精准控制，满足了所有条件。

以上就是《CSS与JS文本单行多行显示及省略号技巧》的详细内容，更多关于的资料请关注golang学习网公众号！