HTML里顯示文本超長時，如何截斷只顯示部分？

在一個網頁里，有的內容非常多，全部顯示出來會很長，為了節省顯示空間，我們往往只顯示內容的一部分，以便能顯示更多其他的內容。<br/>以前處理時，我們只是根據顯示的寬度，來動態計算大概能顯示多少個字符，然后截取一部分的內容顯示出來。這樣很麻煩，因為不同的寬度，需要截取的字符不一樣，而且只截取顯示一段的內容，不利于SEO優化。<br/>下面我們來看下怎么利用css來處理這種問題。

操作方法

01
首先看下我們測試例子的代碼，很簡單的代碼，就是一個div，div里就是一段很長的字符串內容。
02
運行后，就是一個普通的div內容塊。
03
如果我們的內容顯示只需要顯示一行，其余的隱藏，那就很簡單，我們加上css樣式就可以了，只需要三行樣式代碼，如下：
white-space: nowrap; //這行是讓字符顯示不要換行，只在一行里顯示
overflow: hidden; //這行是讓字符顯示超過div容器寬度時，就隱藏內容
text-overflow:ellipsis; // 這行是當字符超過div窗口寬度時，就加上省略號

為了對比效果，我這里再加一段div的內容。如圖
04
刷新頁面后，效果如圖，內容顯示在一行里了，超過容器的字符不顯示，并用省略號表示。（我們真實的字符串里，是沒有省略號的）
05
如果我們需要顯示的內容不止一行時，又要怎么處理？
比如div最多顯示二行內容，超過的隱藏不顯示。我們還是通過css來處理。代碼如下，
overflow: hidden;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
06
運行效果如圖，
但這個效果只能在Chrome，Safari瀏覽器下有效，因為用的是webkit特有的樣式，FireFox，IE等瀏覽器下無效。
07
那么在FireFox，IE瀏覽器下，要怎么處理呢？我們可以加上一行樣式，設置div容器的最大高度，代碼如下，
max-height: 40px; // 這個高度就是二行字符顯示的高度，
08
FireFox瀏覽器下運行如下，沒有省略號的效果，但也能接受了。
End