CSS文本单行或者多行超出区域省略号(...)显示方法

1.单行超出时，主要用到几个CSS属性:

1.text-overflow :

• clip : 　不显示省略标记（...），而是简单的裁切
• ellipsis : 　当对象内文本溢出时显示省略标记（...）

2.white-space:

• normal :默认。空白会被浏览器忽略。

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

• nowwrap:文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

• pre-wrap:保留空白符序列，但是正常地进行换行。

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

单行例子：

    div {
        width: 400px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

2.多行时，主要用以下几个属性

1： display: -webkit-box;

• 在父元素上设置该属性，子代元素能排列在同一水平上。

2： -webkit-line-clamp:

• 可见行数。

3：-webkit-box-orient: vertical;

• 设置或检索伸缩盒对象的子元素的排列方式 。

多行例子

    div {
        width: 400px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        text-overflow: ellipsis;
        overflow: hidden;
    }