利用CSS使超出文本显示省略号

HTML代码：

<div class="div1">
    11111
    22222
    33333
</div>

CSS代码：

.div1{
    width: 100px;
    height: 30px;
    border: 1px solid gray;
    line-height: 30px;
    margin: auto;
    margin-top: 50px;
    /*下方的样式就是用来让超出的文本显示省略号的*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

运行结果：

注释：

CSS中 white-space 属性     

white-space 属性设置如何处理元素内的空白

        nowrap    >>   规定段落中的文本不换行

        normal     >>   空白会被浏览器忽略（默认值）

        pre           >>   空白会被浏览器保留，其行为方式类似HTML中的<pre>标签

        pre-wrap  >>   保留空白符序列，但是正常的进行换行

        pre-line    >>   合并空白符序列，但是保留换行符

        inherit      >>   规定应该从父元素继承 white-space 属性的值

CSS中 overflow 属性

overflow 属性规定当内容溢出元素框时发生的事情。

        hidden     >>   内容会被修剪，并且其余内容是不可见的

        visible      >>   内容不会被修剪，会呈现在元素框之外（默认值）

        scroll        >>   内容会被修剪，但浏览器会显示滚动条，以便查看其余的内容

        auto         >>   如果内容被修剪，浏览器会显示滚动条，以便查看其余的内容

        inherit      >>   规定应该从父元素继承 overflow 属性的值

CSS中 text-overflow 属性

text-overflow 属性规定当文本溢出包含元素时发生的事情

        ellipsis     >>   显示省略符号来代表被修剪的文本

        clip          >>   修剪文本（默认值）

        string      >>   使用给定的字符串来代表被修剪的文本