css超出文字用省略號表示

2021-10-10 02:40:41 字數 427 閱讀 4689

css**

//css

.name

//html: 資料v-for遍歷出來的

3">

}}

需求是,名字超過3個字,就顯示3個字,多於3個,顯示3個字並且顯示省略號,滑鼠懸浮顯示全部名字,用到了elementui中的tooltip,內容是後台返回,前端遍歷的,就拿到遍歷的值,加上類名就行.

省略號的樣式**為:

width:50px; //要加寬度 ,若是span等行內元素,加個display:inline-block;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

超出文字用省略號表示

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

css實現超出文字溢位用省略號代替

一 單行 實現單行文字的溢位顯示省略號使用text overflow ellipsis屬性,但需要配合使用overflow hidden white space nowrap這兩個屬性使用才能達到效果。注意 如下 overflow hidden text overflow ellipsis whit...

CSS超出文字指定寬度用省略號代替和文字不換行

一般的文字截斷 適用於內聯與塊 css code複製內容到剪貼簿 對於 文字溢位的定義 對於 超出範圍顯示省略號 css code複製內容到剪貼簿 需要你注意的是,這個css樣式只對單行的文字的效,如果你想把它用在多行上,也只有第一行有作用的。這個寫法只有ie會有 其它的瀏覽器文字超出指定寬度時會隱...