CSS 文本溢出显示省略号

单行文本溢出

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

多行文本溢出

overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 最大显示行数 */

该方法参考 GitHub - tailwindlabs/tailwindcss-line-clampopen in new window,可能存在兼容性问题,使用时请在多个浏览器中测试。

Note: line-clamp-{n} sets other properties like display and overflow in addition to -webkit-line-clamp. These are not unset by line-clamp-none, so you may need to explicitly override them with utilities like flex or overflow-visible.