在做移動端的專案時經常會遇到文字過長，塊級元素寬度不夠，造成折行的問題，產品會要求說根據寬度展示，超出部分用點號代替
做這種效果的時候會遇到單行展示和多行展示
單行示例：
.ellipsis-single{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
在做移動端的專案時經常會遇到文字過長，塊級元素寬度不夠這行的問題，產品會要求說根據寬度展示，超出部分用點號代替
多行展示例如兩行，超出部分在第二行末尾展示成點號
.ellipsis-many{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;//表示展示的行數，可以根據需求改動
overflow:hidden;
在做移動端的專案時經常會遇到文字過長，塊級元素寬度不夠這行的問題，產品會要求說根據寬度展示，超出部分用點號代替
多行展示只支援webkit核心的瀏覽器例如chorme 等，另外現在大部分移動端應用都支援webkit，故可以應用
以上方法在低版本的ie瀏覽器上並不支援，可自行實現。
css文字省略號
1,單行溢位，超出部分顯示 或者擷取。前提必須有寬度。css 擷取為clip width 300px overflow hidden text overflow ellipsis white space nowrap 但是這個屬性只支援單行文字的溢位顯示省略號，如果我們要實現多行文字溢位顯示省略號呢...
純css實現多行文字省略號顯示
首先傳統的單行文字實現省略號顯示 如下 overflow hidden text overflow ellipsis white space nowrap 注意點 部分低版本瀏覽器需要加上固定寬度才支援text overflow屬性。純css實現多行文字省略號顯示 方法一 text overflow...
文字單行省略號 多行出現省略號
第一種僅支援單行省略 width value overflow hidden text overflow ellipsis white space nowrap 第二種支援多行省略 width value overflow hidden text overflow ellipsis display ...