div固定大小文字溢出自動縮小_CSS 實作單行、多行文字截斷，實作以...結尾的效果...

在項目需求開發時，由于文本内容長度的不确定性，經常會碰到文本内容超出的問題，通常這種情況，UI/UE都會要求我們将超出部分用省略号(...)來顯示，這種做法基本上已經是一個業界共識了。然而，這麼一個理所當然的效果，在前端卻一直是一個難題。

如下圖：

看似十分簡單的标題截斷效果，但是竟然沒有一個統一 CSS 屬性實作标準，需要用到一些奇淫妙計來實作，一般來說，在做這樣文字截斷效果時我們更多是希望：

1. 相容性好，對各大主流浏覽器有好的支援
2. 響應式截斷，根據不同寬度做出調整
3. 文本超出範圍才顯示省略号，否則不顯示省略号
4. 省略号位置顯示剛好

基于上述的準則，下面我就講介紹各種技巧實作截斷效果，并根據上述的評判标準得出最優解

單行文本溢出截斷

單行文本溢出截斷相信大家都是順手拈來了。關鍵點是使用：text-overflow: ellipsis;。以及在某些元素下還要注意換行問題。

div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #ff7733; color: white;}
           

效果如下

浏覽器的相容性還是可以哒

單行最多展示九個字

這是設計師給提的需求，關鍵點如下：

1. 若字數小于等于 9，則展示九個字
2. 若字數大于 9，則展示九個字加省略号。

這個需求和浏覽器的實作不太一樣。因為浏覽器會将最後一個字元占據的空位用于放置省略号。

假設我們每個字元大小都為 15 px。

如果空位長度為 150px(能放下十個字元)，則内容是十個字元的時候，會完全顯示十個字元。

如果空位長度為 145px (能放下九個字元)，則内容是十個字元的時候，會展示八個字元 + 省略号。

為了實作我們的需求，我們可以利用僞元素，在後面添加多一個字型。

多行文本溢出截斷

1)使用-webkit-line-clamp

如果我們要展示的文字是多行文字，并且不能超出固定行的話。我們就需要一些特别的屬性進行輔助。

這個屬性就是 -webkit-line-clamp。

在此樣式中我們展示如何控制文字不超過四行。

示例代碼如下：

p { width: 400px; text-overflow: ellipsis;  display: -webkit-box; overflow: hidden; -webkit-line-clamp: 4; -webkit-box-orient: vertical; text-align: justify;}
           

要注意概屬性需要與以下屬性配合：

它需要和 display、-webkit-box-orient 和 overflow 結合使用：

• display: -webkit-box; 必須結合的屬性，将對象作為彈性伸縮盒子模型顯示。
• -webkit-box-orient; 必須結合的屬性，設定或檢索伸縮盒對象的子元素的排列方式
• text-overflow: ellipsis; 可選屬性，可以用來多行文本的情況下，用省略号“…”隐藏超出範圍的文本。

從效果上來看，它的優點有：

1. 響應式截斷，根據不同寬度做出調整
2. 文本超出範圍才顯示省略号，否則不顯示省略号
3. 浏覽器原生實作，是以省略号位置顯示剛好

但是這個方案的缺點也比較明顯：

1. 支援的浏覽器有限制

因為該屬性是 webkit 的私有屬性，是以隻有 webkit 核心的浏覽器才支援這個屬性，像 Firefox，IE 等浏覽器就無法支援該特性了。

2. 不能很友善的開發“點選展開”的互動

因為是否超過範圍完全由浏覽器判斷，并沒有向我們報告。是以我們很難去判斷是否有超出。

是以這種模式多建議使用在移動端上，而且無需要判斷展開的界面内。

2)定位元素實作多行文本截斷

另外還有一種靠譜簡單的做法就是設定相對定位的容器高度，用包含省略号(…)的元素模拟實作，實作方式如下：

效果如下：

但是當我們的寬度足夠的時候，出現了尴尬的地方

從實作效果來看，它所具備的優點：

1. 相容性好，對各大主流浏覽器有好的支援
2. 響應式截斷，根據不同寬度做出調整

但是它無法識别文字的長短，即文本超出範圍才顯示省略号，否則不顯示省略号。還有因為是我們人為地在文字末尾添加一個省略号效果，就會導緻它跟文字其實沒有貼合的很緊密，遇到這種情況可以通過添加 word-break: break-all; 使一個單詞能夠在換行時進行拆分。

适合場景：文字内容較多，确定文字内容一定會超過容器的，那麼選擇這種方式不錯。

3)使用 float 模拟實作超出截斷

回到一開始我要做的内容是多行标題文字截取效果，顯然是無法控制标題的長度的，顯然是無法使用上述的方式。回到事情的本質來看：我們希望 CSS 能夠有一種屬性，能夠在文字溢出的情況下顯示省略号，不溢出時不顯示省略号。(兩種形式，兩種效果)

正當我以為 CSS 已經無能為力，隻能通過 JS 去實作的時候，後來看到了一個方法非常巧妙，而且能夠滿足上述提到的所有準則，下面我就介紹如何通過 float 特性實作多行文本截斷效果。

基本原理：

有個三個盒子 div，粉色盒子左浮動，淺藍色盒子和黃色盒子右浮動，

1. 當淺藍色盒子的高度低于粉色盒子，黃色盒子仍會處于淺藍色盒子右下方。
2. 如果淺藍色盒子文本過多，高度超過了粉色盒子，則黃色盒子不會停留在右下方，而是掉到了粉色盒子下。

好了，這樣兩種狀态的兩種展示形式已經區分開了，那麼我們可以将黃色盒子進行相對定位，将内容溢出的黃色盒子移動到文本内容右下角，而未溢出的則會被移到外太空去了，隻要我們使用 overflow: hidden 就可以隐藏掉。

基本原理就是這樣，我們可以将淺藍色區域想象成标題，黃色區域想象為省略号效果。那麼你可能會覺得粉色盒子占了空間，那豈不是标題會整體延後了嗎，這裡可以通過 margin 的負值來出來，設定淺藍色盒子的 margin-left 的負值與粉色盒子的寬度相同，标題也能正常顯示。

那麼我們将前面的 DOM 結構簡化下，變成下面這樣：

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos labore sit vel itaque delectus atque quos magnam assumenda quod architecto perspiciatis animi.

剛才的粉色盒子和黃色盒子都可以用僞元素來代替。

.wrap { height: 40px; line-height: 20px; overflow: hidden;}.wrap .text { float: right; margin-left: -5px; width: 100%; word-break: break-all;}.wrap::before { float: left; width: 5px; content: ''; height: 40px;}.wrap::after { float: right; content: "..."; height: 20px; line-height: 20px; /* 為三個省略号的寬度 */ width: 3em; /* 使盒子不占位置 */ margin-left: -3em; /* 移動省略号位置 */ position: relative; left: 100%; top: -20px; padding-right: 5px;}
           

實作效果

當長度足夠的時候

這裡我目前看到最巧妙的方式了。隻需要支援 CSS 2.1 的特性就可以了，它的優點有：

1. 相容性好，對各大主流浏覽器有好的支援
2. 響應式截斷，根據不同寬度做出調整
3. 文本超出範圍才顯示省略号，否則不顯示省略号

至于缺點，因為我們是模拟省略号，是以顯示位置有時候沒辦法剛剛好，是以可以考慮：

1. 加一個漸變效果，貼合文字，就像上述 demo
2. 效果一樣添加 word-break: break-all; 使一個單詞能夠在換行時進行拆分，這樣文字和省略号貼合效果更佳。

這個方法應該是我看到最好的用純 CSS 處理的方式了，如果你有更好的方法，歡迎留言交流！