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;