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

在一個網頁裏，有的內容非常多，全部顯示出來會很長，為了節省顯示空間，我們往往只顯示內容的一部分，以便能顯示更多其他的內容。
以前處理時，我們只是根據顯示的寬度，來動態計算大概能顯示多少個字符，然後截取一部分的內容顯示出來。這樣很麻煩，因為不同的寬度，需要截取的字符不一樣，而且只截取顯示一段的內容，不利於SEO優化。
下面我們來看下怎麼利用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瀏覽器下運行如下，沒有省略號的效果，但也能接受了。