CSS 多行文字超出的處理
在前端開發中，經常會遇到多行文字超出容器的情況，這時候我們就需要使用 CSS 來進行處理，以使頁面美觀整潔。
一、單行文字超出
首先來看一下單行文字超出的情況。在 CSS 中，我們可以使用 text-overflow 屬性來實現文本溢出時的省略號顯示。具體代碼如下：
```css
.ellipsis {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
```
其中，white-space: nowrap 屬性也很重要，它的作用是使文字在一行內顯示。另外，overflow: hidden 屬性可以使文字超出容器時進行隱藏，騰出空間給省略號顯示。
二、多行文字超出
當出現多行文字超出時，我們可以采用兩種方法進行處理。一種是使用 CSS3 的屬性；另一種是使用 JS 來實現。
1、使用 CSS3 的屬性
CSS3 的屬性 -webkit-line-clamp 可以實現對于多行文字的顯示數量的限制。代碼如下：
```css
.multiline {
display: -webkit-box;
-webkit-line-clamp: 2; /* 顯示兩行文字 */
-webkit-box-orient: vertical;
overflow: hidden;
}
```
這里，使用 display 屬性將容器改為 "box"，然后使用 -webkit-box-orient: vertical 將文本按照垂直方向排列，在此基礎上，在添加-webkit-line-clamp: 2 屬性，文本就只會顯示兩行了。
2、使用 JS
上面說到了使用 CSS3 的屬性可以實現對多行文字的限制，但是這種辦法只在 Chrome 瀏覽器才能實現。IE 等瀏覽器是無法支持的。因此，我們可以采用 JS 進行多行文字的限制。
```html
使用JS實現多行文字的限制
``` ```css .multiline { line-height: 1.2em; height: 3.6em; overflow: hidden; } ``` ```javascript var p = document.getElementsByClassName('multiline')[0]; var lineHeight = parseFloat(window.getComputedStyle(p).lineHeight); var maxHeight = parseFloat(window.getComputedStyle(p).height); var text = p.innerHTML; var count = Math.floor(maxHeight / lineHeight); if (text.length >count + 10) { p.innerHTML = text.substr(0, count) + '...'; } ``` 我們先獲取到 p 元素的高度和行高，然后將 p 元素的高度除以行高，得到的結果就是這個元素的行數。接下來，如果文本的長度超過 count + 10，就截斷文本并在末尾添加省略號。 總結 多行文字超出是前端開發中常見的問題，使用 CSS 和 JS 可以輕松的實現對多行文字的處理。當然，瀏覽器對 CSS3 的支持也是需要考慮的。對于以上幾種方法，可以根據實際情況進行選擇。