css设置文字不换行，超出容器部分省略_不换行,超出容器的...代替

作者：很楠不爱3 | 2024-02-20 17:43:04

踩

不换行,超出容器的...代替


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

首先设置overflow：hidden，超出部分隐藏。

然后设置text-overflow：ellipsis，以省略号代替被省略的文字

text-overflow还有另外两个值。

一共三个值如下：

最后是设置white-space：nowrap 合并空格并且不换行

当然white-space 空格处理也有很多属性

最后我也做了小小的实验，貌似overflow属性不写，text-overflow的值clip和ellipsis的效果都是一样的，都是超出部分被裁掉了。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/120474