CSS文字不换行，超出部分显示...

原创已于 2024-01-08 18:00:17 修改 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3

于 2021-05-26 15:45:51 首次发布

本文介绍了如何在小程序和App中实现文字超出部分显示省略号的效果，通过CSS样式`overflow:hidden`、`text-overflow:ellipsis`、`white-space:nowrap`以及特定的移动端适配如`-webkit-line-clamp`来控制显示的行数，确保用户界面的整洁和信息展示的合理性。

web浏览器设置文字超出部分显示...

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

小程序与App 要设置文字超出部分显示... 要增加以下样式行。

text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; //可设置显示的行数
line-clamp: 2;
-webkit-box-orient: vertical;