CSS文本單行或者多行超出區域省略號(...)顯示方法

單行超出時，主要用到幾個CSS屬性:

1.text-overflow : clip | ellipsis ;

clip : 　不顯示省略標記（...），而是簡單的裁切
ellipsis : 　當對象內文本溢出時顯示省略標記（...）

2.white-space: nowrap | normal | pre|pre-wrap|pre-line; 

normal :默認。空白會被瀏覽器忽略。

pre:空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標簽。

nowwrap:文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止。

pre-wrap:保留空白符序列，但是正常地進行換行。

pre-line:合並空白符序列，但是保留換行符。

單行例子：

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

多行時，主要用以下幾個屬性

1： display: -webkit-box; 在父元素上設置該屬性，子代元素能排列在同一水平上。

2： -webkit-line-clamp: 3;可見行數。

3：-webkit-box-orient: vertical; 設置或檢索伸縮盒對象的子元素的排列方式 。

多行例子

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