最早的文字溢位隱藏只是簡單的hidden，把看不見的都給「去掉」，就像這樣：
class
="hid"
>
哈哈哈哈哈哈哈哈哈哈哈
p>
.hid
.hid
從這裡可知：達到省略號效果需要兩個條件 —— 文字不換行且超出規定部分！
但是現在很多時候我們既需要多行顯示資訊，又需要控制顯示行數。由此催生了「多行文字溢位省略效果」：它的本質還是flex彈性模型作用！
class
="indent"
>
aenean eu leo quam. pellentesque ornare sem lacinia quam venenatis vestibulum. fusce dapibus, tellus ac cursus commodo,
tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. donec ullamcorper nulla non metus auctor fringilla.
sed posuere consectetur est at lobortis. cras justo odio, dapibus ac facilisis in, egestas eget quam. aenean lacinia bibendum nulla sed consectetur.
nulla vitae elit libero, a pharetra augue.
p>
.indent
到這裡似乎一切都很美好。but你是不是忽略了上面**中幾乎每乙個屬性值前面都有的「-webkit」字首？
這說明這種方式只能用在webkit核心的瀏覽器中！侷限性太大。所以得通過一些相容性穩定的屬性模擬該策略。常見的非常穩定的屬性也就 width/height/overflow/margin/padding等以及各種偽元素。
那能不能結合max-height和line-height去計算最大行數，通過定位布局將「省略號」固定到整個的末尾（通常是右下角），還有就是webkit省略號有些太「突兀」了，可以用linear-gradient調整省略號所在位置的漸變背景色以使其看上去更自然一些？
——after偽元素當仁不讓地扛起了大旗：
.my-indent
.my-indent::after
word-break: break-all;可自行決定去留，這裡筆者加上只是為了顯得更好看一些：
讓我們把它放到乙個盒子中：
似乎也很正常，於是你又放鬆了警惕！
然後我們把文字減少到短短的兩句：
怎麼回事？明明沒有溢位卻還有省略號！
這就要說到上面我們做了相容性處理的**雖然相容性好了，但是畢竟只有css，我們是沒法知道「它是否會溢位規定區域」的，也就只能「無論何時都會顯示」。所以我們還需結合js做額外處理：
我們大概都知道：乙個頁面在超出「一屏」的大小時會有三個「基本屬性」：scrollheight —— 網頁文件的真實高度、clientheight —— 網頁在瀏覽器視窗可視高度、以及scrolltop —— 網頁向上滾動了多少距離。
從上面推論我們也知道了：文字在橫向被阻攔時會自動折行。
由此模擬，不管文字被隱藏了沒有它的整體高度是不會變的：
所以我們可以將文字本身的高度和規定了範圍的外部div的高度拿來比較，如果超出了，就顯示省略號，否則隱藏 —— 通過類名來控制：
/** 將上面的my-indent換成hidden，具體**不變 */
單行 多行文字溢位隱藏
單行文字超出隱藏 在這裡插入 片 overflow hidden text overflow ellipsis white space nowrap 多行文字超出隱藏 在這裡插入 片 overflow hidden 超出隱藏 text overflow ellipsis 文字溢位時顯示省略標記 di...
css 處理 單行 多行 文字溢位
1 單行溢位 前提必須有寬度 width 300px whitewhite space nowrap 文字不會換行。overflow hidden 溢位多餘裁剪 text overflow ellipsis 顯示省略符號來代表被修剪的文字。2 多行文字溢位 因使用了webkit的css擴充套件屬性，...
關於單行和多行文字溢位用省略號表示
實現單行或多行文字溢位後隱藏並顯示省略號 最近寫專案遇到乙個關於文字溢位隱藏並顯示省略號的問題 1.單行文字溢位隱藏 當文字長度超出一行的寬度時，會自動隱藏溢位文字並且最後顯示 提示使用者。實現方法 純css樣式 複製 p複製 上面為p標籤設定的3個css屬性是必須，缺一不可，其中 text ove...