先看上面两幅图片,如果实现上面现象该如何
.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>
现在解决如果在一行显示,现在问题的出现就是她会自动换行，所以我们可以阻止默认换行,认识一个属性
- 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还是使用插入空格的那段,现在结果如下图
2016-06-17_024044.png
