CSS樣式 解決文字過長顯示省略號問題

2022-09-23 10:37:03 字數 1803 閱讀 3618

回到頂部

一般 css 樣式,當寬度不夠時,可能會出現換行的效果。這樣的效果在某些時候肯定是不行的,可以修改 css 樣式來解決這個問題。

未使用 ellipsis 自適應寬度

左側寬度變小,文字換行。

右側寬度變小,文字換行。

【通常寫法:】【說明:】

text-overflow:表示當文字溢位時是否顯示省略標記,ellipsis表示省略號效果,clip 表示擷取的效果。

overflow:hidden; 將文字溢位的內容隱藏。

white-space:nowrap; 是禁止文字換行。

width: (可選)可以寫固定值,也可以根據寬度自適應顯示效果。

不顯示省略標記,而是簡單的裁切條

當物件內文字溢位時顯示省略標記

使用 clip 自適應寬度

使用 ellipsis 自適應寬度

clip 顯示裁剪的效果,ellipsis 顯示省略號的效果。

回到頂部

一般 css 樣式,當寬度不夠時,可能會出現換行的效果。這樣的效果在某些時候肯定是不行的,可以修改 css 樣式來解決這個問題。

未使用 ellipsis 自適應寬度

左側寬度變小,文字換行。

右側寬度變小,文字換行。

【通常寫法:】【說明:】

text-overflow:表示當文字溢位時是否顯示省略標記,ellipsis表示省略號效果,clip 表示擷取的效果。

overflow:hidden; 將文字溢位的內容隱藏。

white-space:nowrap; 是禁止文字換行。

width: (可選)可以寫固定值,也可以根據寬度自適應顯示效果。

不顯示省略標記,而是簡單的裁切條

當物件內文字溢位時顯示省略標記

使用 clip 自適應寬度

使用 ellipsis 自適應寬度

clip 顯示裁剪的效果,ellipsis 顯示省略號的效果。