富文字溢位隱藏，超出用省略號表示

2021-10-18 23:27:34 字數 548 閱讀 7595

js方法

在實際的專案中，由於文字內容的長度不確定性和頁面布局的固定性，難免會出現文字內容超過div或者其他標籤區域的情況，此時比較好的做法就是當文字超過限定的div寬度後自動以省略號（…）顯示，這樣，按照習慣，人們都會知道這裡有文字被省略了。

div
div
缺點：使用webkit的css擴充套件屬性（webkit是私有屬性）-webkit-line-clamp，因使用了webkit的css擴充套件屬性，該方法適用於webkit瀏覽器及移動端；-webkit-line-clamp用來限制在乙個塊元素顯示的文字的行數，限定了在第幾行後面增加省略號，超出必須隱藏。

div


div:


:after
效果如下：

原理：在右下角生產乙個表示省略號的偽元素，絕對定位到指定寬高的容器右下角，實現多行溢位點點點。

超出文字用省略號表示

1 單行文字 幸福像花兒一樣，我的快樂我做主。臨淵羡魚不如退而結網。你要相信，生活對每乙個人都是公平的，不要灰心不要喪氣。youcan！幸福像花兒一樣，我的快樂我做主。臨淵羡魚不如退而結網。你要相信，生活對每乙個人都是公平的，不要灰心不要喪氣。youcan！幸福像花兒一樣，我的快樂我做主。臨淵羡魚不...

文字溢位隱藏，隱藏的問字用省略號表示

之前在寫頁面的時候用的都是單行文字溢位隱藏，今天遇到了多行文字溢位隱藏，溢位部分用省略號。我通過查閱一些資料整理了一下，拿出來與大家分享一下。單行文字的溢位隱藏 對於單行文字溢位 隱藏，text overflow ellipsis 就能完美的解決，不過在使用他時，一定要結合 overflow hid...

css超出文字用省略號表示

css css name html 資料v for遍歷出來的 3 需求是，名字超過3個字，就顯示3個字，多於3個，顯示3個字並且顯示省略號，滑鼠懸浮顯示全部名字，用到了elementui中的tooltip,內容是後台返回，前端遍歷的，就拿到遍歷的值，加上類名就行.省略號的樣式 為 width 50p...