![img_6e741debdd3d0ac6eb3a8fc355ddf521.png](https://i-blog.csdnimg.cn/blog_migrate/24d3b495b8a2234e348ea48269c25bea.png)
![img_ca31b207484941da2bfa08cedbf33c4b.png](https://i-blog.csdnimg.cn/blog_migrate/f43d5b40392850cc481856c2426ddfb4.png)
先看上面两幅图片,如果实现上面现象该如何
.main{
width: 100px;
border: 1px solid red;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="main">
1111111111111111111111111111111111111111
</div>
必须overflow:hidden;和text-overflow:ellipsis组合才可以实现上述效果
- overflow:clip|ellipsis|string
值 | 解释 |
---|---|
clip | 修剪文本 |
ellipsis | 显示省略符号来代表被修剪的文本 |
string | 使用给定的字符串来代表被修剪的文本 |
难道这就完成了吗?那当然不是。如果我们内容有很多的话,但是我们只想在一行显示出来,并且多余的用省略号代替,可问题就是如果内容出现空格或连字符的话会自动换行那怎么办?先看看问题现象
- 使用同样的样式
.main{
width: 100px;
border: 1px solid red;
overflow: hidden;
text-overflow: ellipsis;
}
- 现在特别注意内容中间有空格
<div class="main">
111111111111111111 1111111111111111111111
</div>
![img_03144eb2882d8c91263a9bb20d536a4f.png](https://i-blog.csdnimg.cn/blog_migrate/070c7145a812b4b5cc6ee4f5d81dafbf.png)
现在解决如果在一行显示,现在问题的出现就是她会自动换行,所以我们可以阻止默认换行,认识一个属性
- white-space
值 | 解释 |
---|---|
ormal | 默认。空白会被浏览器忽略。 |
pre | 空白会被浏览器保留。其行为方式类似 HTML 中的<pre> 标签。 |
nowrap | 文本不会换行,文本会在在同一行上继续,直到遇到 标签为止。 |
pre-wrap | 保留空白符序列,但是正常地进行换行。 |
pre-line | 合并空白符序列,但是保留换行符。 |
inherit | 规定应该从父元素继承 white-space 属性的值。 |
我们使用white-space: nowrap,下来让我们再试试
```css
.main{
width: 100px;
border: 1px solid red;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
- html还是使用插入空格的那段,现在结果如下图
![img_ac6cb086608ed1c4a87cf56022afd8c1.png](https://i-blog.csdnimg.cn/blog_migrate/8b8b633778d1f3badc49a0f6e6c04873.png)
2016-06-17_024044.png