.one-line { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
上述代码使用了三个CSS属性:
- overflow: hidden;用于将超出容器范围的内容隐藏
- white-space: nowrap;用于禁止内容换行
- text-overflow: ellipsis;用于在一行超过容器范围时显示省略号
通过将这些属性应用到相关元素上,大家可以实现一行超过截断的效果。这在展示标题、摘要等重要信息的场景中非常实用。