先看上面两幅图片,如果实现上面现象该如何

.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还是使用插入空格的那段,现在结果如下图