小技巧！CSS 整块文本溢出省略特性探究

文本超长打点在 CSS 中有两种方法解决。对于单行文本，我们使用{ width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }，这样文本超出部分会被省略。当遇到多行文本，-webkit-line-clamp 的使用则可实现整段文本的溢出省略，兼容性非常好，代码是这样：{ width: 200px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }。然而，若希望对一段文本的整个超出部分实现省略，单纯的溢出省略方式可能无法满足需求。这里的关键在于将包含文本的 span 元素的 display 属性从 inline 改为 inline-block。通过这一操作，实现对整个块级元素的文本溢出省略，代码为：.person-card__desc span { display: inline-block; }。此方案在 iOS 环境下则不适用，这是由于 text-overflow 仅对内联元素有效。为解决此问题，可以使用多行省略方法，即将 -webkit-line-clamp: 2 替换为 -webkit-line-clamp: 1，并确保内含文本的元素拥有正常的换行效果，即 white-space: normal。在 iOS/Safari 下，采用这种做法即可完美实现整块文本的超长溢出省略。值得注意的是，在使用 -webkit-line-clamp 方法时，需确保元素允许换行，而非强制不换行。总结而言，这提供了全兼容的方法以实现整块文本的超长溢出省略，但 -webkit-line-clamp 方法在兼容性上有所限制，实际应用时需根据具体需求权衡。