CSS 文本溢出隐藏显示省略号

  1. 单行文本溢出
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
  1. 多行文本溢出
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1; /*最大行数*/

该方法参考GitHub - tailwindlabs/tailwindcss-line-clamp, 可能存在兼容问题, 使用时请在多个浏览器测试以保证结果准确性

Note that the line-clamp-{n} set other properties like display and overflow in addition to -webkit-line-clamp which are not unset by line-clamp-none, so depending on what you are trying to achieve you may need to explicitly override those properties with utilities like flex or overflow-visible as well.

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容