本文介绍了CSS中如何处理文本溢出，通过设置`overflow:hidden`隐藏超出内容，结合`text-overflow:ellipsis`显示省略号。同时，详细解析了`white-space`属性的不同值，如`normal`、`nowrap`、`pre`等，以及它们对空格和换行的影响。通过实例展示了如何在不使用`overflow`时，`clip`和`ellipsis`在`text-overflow`中的相似效果。
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
首先设置overflow：hidden，超出部分隐藏。
然后设置text-overflow：ellipsis，以省略号代替被省略的文字
text-overflow还有另外两个值。
一共三个值如下：
| ellipsis | 以省略号代替被省略的文字 |
| string | 以某个字符串代替被省略的文字 |
| clip | 裁剪文字 |
最后是设置white-space：nowrap 合并空格 并且不换行
当然white-space 空格处理 也有很多属性
| 空格处理 | 换行 | |
| normal | 合并多个相邻空格为一个空格 | 根据容器大小换行 |
| nowrap | 合并多个相邻空格为一个空格 | 不换行 |
| pre | 保留空格 | 不换行 |
| pre-wrap | 保留空格 | 根据容器大小换行 |
| pre-line | 合并多个相邻空格为一个空格 | 不换行 |
最后我也做了小小的实验， 貌似overflow属性不写，text-overflow的值clip和ellipsis的效果都是一样的，都是超出部分被裁掉了。
扫一扫
7347
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
