1
让我们分别来看一下使用了这些样式，和不使用这些样式的区别吧
- html内容
<div class="box"> <span>我是一段测试文本1我是一段测试文本2我是一段测试文本3我是一段测试文本4我是一段测试文本5我是一段测试文本5</span></div>
- css内容
.box{ background: red; width: 100px;}
- 效果展示
我们可以看到，文本根据边框的宽度，自动换行，并且全部显示
2
此时我们使用一下white-space:nowrap，看看效果是什么样的
- css内容
.box{ background: red; width: 100px; white-space: nowrap; /*使文本内容不换行，写在一行*/}
- 效果展示
可以看到，原本多行的文本现在被放到了一行内，并且文本超出了标签的宽度
3
此时，我们再在上面的基础上加上overflow:hidden，看看效果是什么样的
- css内容
.box{ background: red; width: 100px; white-space: nowrap; /*使文本内容不换行，写在一行*/ overflow: hidden; /*隐藏多余内容*/}
- 效果展示
我可以看到，原本超出标签大小的部分文本已经被隐藏了
4
最后我们再使用关键的一个属性text-overflow:ellipsis，我们来看看效果
- css内容
.box{ background: red; width: 100px; white-space: nowrap; /*使文本内容不换行，写在一行*/ overflow: hidden; /*隐藏多余内容*/ text-overflow: ellipsis; /*将多余内容以省略号的方式展示*/}
- 效果图
到这一步，就成功地实现了我们想要的效果了，是不是非常的简单呢？
