在專案中常常遇到某段文字長度超出了設計的內容，對於溢位的文字需要處理成省略號，於是我就目前遇見過的情況總結一下。
這種情況是最簡單的。
class="text">
你以為我會告訴你這一段文字已經超出長度了嗎？
p>
複製**
如果固定寬度為100px,只需要顯示一行。
**如下：
.text
複製**
優點：簡單，相容多瀏覽器。
缺點：由於使用white-space:nowrap使強制不換行，所以只適合的單行。
還是以上面的內容為例。如果要顯示2行，樣式為：
.text
複製**
優點：可以實現限制多行, **量不多。
缺點：只適用於webkit核心的瀏覽器。所以大部分移動端瀏覽器都支援，google，safari 瀏覽器只要不是版本過低都支援。ie，火狐瀏覽器不支援這個方法。
但是有的客戶就要用ie，客戶也要面子的，不能你讓他換瀏覽器他就換瀏覽器。
不管怎麼樣，還是要想個方法相容其他瀏覽器。於是我在網上找到新的方法: 給予固定的行高(line-height)，最大高度(max-height)為行高的倍數,兩行就是兩倍的行高。省略號使用乙個偽型別(::after)顯示，用相對定位放到文字的後面。
class='text' >
你以為我會告訴你這一段文字已經超出長度了嗎？
p>
複製**
p、div等塊元素,但是不要用span等行元素。
css**如下：
.text
.text
::after
複製**
說明：
after的內容為'...',放在文字的最後面。但是會和最後一段文字重疊，看起來會很違和，加上漸變的background並對四種情況做好相容，可以使內容看起來更合理。你以為這樣就完美相容了嗎，不要忘了還有
ie，ie8的偽型別不用::after而使用:after，ie6-7並不支援偽型別的content屬性,需要在使用...代替偽型別。
class='text' >
你以為我會告訴你這一段文字已經超出長度了嗎？
...span>
p>
複製**
.text
.text>span
複製**
缺點：實現起來麻煩，即便內容很少也會出現省略號。
所以，這種方法實現的時候需要結合js進行判斷。用js處理的話非常簡單，我就不寫了,畢竟我標題是純css實現。出來混是要講信用的，既然我說純css就一定不寫js,我並不是因為想偷懶，是我強烈的信譽感和正直的社會責任感不允許我這麼做。
上面兩種情況是固定了高度時，將溢位內容變為省略號的方法。但是有時候遇到自適應或要在彈性布局裡面實現溢位文字變省略號時，不宜直接設定寬度。比如在或者flex布局裡面,直接設定寬度的話會喪失靈活性(即便是vw也有很多情況不行),也可能影響到其他地方。
這裡以為例子來實現
border="1"
cellspacing="0"
cellpadding="10"
align="center" >
第一行的第一列td>
第一行的第二列td>
第一行的第三列td>
tr>
第二行的第一列td>
我今天不僅要超出長度，還要讓全世界都知道，這個隊形已經被我破壞了。
td>
第二行列第三列td>
tr>
table>
複製**
如果直接為該列設定寬度，那麼當字型大小，或表的寬度發生變化，這一列的寬度則無法靈活的變化。那麼如何使這一列的內容像上一列那麼整齊的寬度呢。
通過width:100%可以獲取父元素分配的寬度但是會因為文字太多將單元格撐開。如果希望文字無法把單元格撐開，那就不要把內容放到單元格裡面，使用相對定位，讓文字不與單元處在同一水平，就像根據這個單元格裁剪出來的貼紙，然後貼到單元格上一樣。
html**如下：
class="content">
class="text">
我今天不僅要超出長度，還要讓全世界的人都知道，這個隊形已經被我破壞了。
div>
div>
td>
複製**
css如下：
.content
.text
複製**
這個方法對上面的
單行 和
多行 都是通用的,多行只需要固定高度就行了。
優點：可以在不確定寬度或不宜設定寬度時使用。
缺點：需要調整位置比較麻煩。
多數情況下，高度都不會變， 所以暫時沒有總結不固定高度的情況。
文字溢位部分自動滾動顯示
我們在一定區域裡面寫文字的時候經常會出現文字溢位的現象，一般情況下會使用 html view plain copy overflow hidden text overflow ellipsis white space nowrap 實現溢位隱藏，即用省略號代替溢位的部分，這樣比較美觀而且溢位部分的詳...
CSS實現單行 多行文字溢位部分省略（ ）顯示
如下 氛圍是他個人會有人推薦用他人看天空娛樂戶人家軟體園如瑞今天一天射日訪問與太熱亢個如 效果 氛圍是他個人會有人推薦用他人看天空娛樂戶人家軟體園如瑞今天一天射日訪問與太熱亢個如 但實際上效果是這樣的，並沒有起到作用 因此有很多人說用js來配合解決，手動新增.標籤，新增 after什麼的。我覺得太麻...
css實現文字溢位顯示省略號
看到很多 上的文章列表只顯示一部分，之後就是乙個閱讀全文鏈結，或者是以乙個省略號結尾。今天就說說單行文字，多行文字溢位時怎麼顯示省略號？overflow hidden white space nowrap text overflow ellipsis display webkit box 將物件作為...