在前端開發中，文字溢位截斷是比較常見的需求，也是一件經常需要考慮的業務場景細節，它能讓我們的頁面看起來沒那麼「怪異」。
本文通過css和js兩種編碼方案，給出通用的解決方案。
overflow: hidden；（文字長度超出限定寬度，則隱藏超出的內容）
white-space: nowrap；（設定文字在一行顯示，不能換行）
text-overflow: ellipsis；（規定當文字溢位時，顯示省略符號來代表被修剪的文字）
無相容問題
響應式截斷
文字溢位範圍才顯示省略號，否則不顯示省略號
省略號位置顯示剛好
只支援單行文字截斷function
substringplugin
(content, limit =10)
;if(content.constructor !== string)
return;if
(content.length <= limit)
return`$
...`
;}
首個引數傳入字串，第二個引數傳入字串長度最大限制無相容問題
文字溢位範圍才顯示省略號，否則不顯示省略號
省略號位置顯示剛好
不需要寫css樣式
只支援單行文字截斷
只適用於固定字串長度的文字截斷
非響應式截斷
-webkit-line-clamp:
2；（用來限制在乙個塊元素顯示的文字的行數，2 表示最多顯示 2 行。為了實現該效果，
它需要組合其他的 webkit 屬性）
display:
-webkit-box；（和 1 結合使用，將物件作為彈性伸縮盒子模型顯示 ）
-webkit-box-orient: vertical；（和 1 結合使用 ，設定或檢索伸縮盒物件的子元素的排列方式 ）
overflow: hidden；（文字溢位限定的寬度就隱藏內容）
text-overflow: ellipsis；（多行文字的情況下，用省略號 「…」 隱藏溢位範圍的文字)
響應式截斷
文字溢位範圍才顯示省略號，否則不顯示省略號
省略號顯示位置剛好
相容性一般：-webkit-line-clamp 屬性只有 webkit 核心的瀏覽器才支援適用場景
多適用於移動端頁面及不需要做過多非主流瀏覽器相容的pc端，因為移動裝置瀏覽器更多是基於 webkit 核心function
formatstr
(ele, line =2)
else
ele.innerhtml = content;
}
首個引數傳入dom元素，第二個引數傳入行高無相容問題
響應式截斷
文字溢位範圍才顯示省略號，否則不顯示省略號
需要 js 實現，背離展示和行為相分離原則
文字為中英文混合時，省略號顯示位置略有偏差
多行文字溢位截斷元件,使用的vue指令,具體用法,readme.md中已經寫的很詳細了，就不多贅述。
前端 單行文字溢位省略與多行文字溢位省略
text ellipsis示例 效果 multiline ellipsis示例 慶曆四年春，滕子京謫守巴陵郡。越明年，政通人和，百廢具興，乃重修岳陽樓，增其舊制，刻唐賢今人詩賦於其上，屬予作文以記之。予觀夫巴陵勝狀，在洞庭一湖。銜遠山，吞長江，浩浩湯湯，橫無際涯，朝暉夕陰，氣象萬千，此則岳陽樓之大觀...
多行文字溢位顯示省略號
這裡是i喵醬,這個是乙個多行超出換行的小demo,看這裡看這裡 overflow hidden 內容會被修剪，超出隱藏。text overflow ellipsis 超出範圍顯示 display webkit box 把物件轉換成彈性盒模型 webkit box orient vertical 設定...
CSS中多行文字溢位省略
overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行,只能顯示一行 這個只是用適用於單行文字溢位情況，之前處理多行文字的話需要js來支援。display webkit box 將物件作為彈性伸...