效果圖
這一行用於測試文字超過容器寬度的省略情況
設定如何處理元素內的空白(比如空格和換行符)。值描述
normal
預設。空白會被瀏覽器忽略。
pre空白會被瀏覽器保留。其行為方式類似 html 中的標籤。
nowrap
文字不會換行,文字會在在同一行上繼續,直到遇到
標籤為止
pre-wrap
保留空白符序列,但是正常地進行換行。
pre-line
合併空白符序列,但是保留換行符。
inherit
規定應該從父元素繼承 white-space 屬性的值。
這是一些文字。
這是一些文字。
這是一些文字。
這是一些文字。
這是一些文字。
這是一些文字。
這是一些文字。
這是一些文字。
這是一些文字。
這是一些文字。
這是一些文字。
這是一些文字。
規定當文字溢位包含元素時的處理效果值描述
text-overflow: clip
修剪文字
text-overflow: ellipsis
顯示省略符號來代表被修剪的文字
text-overflow: string
使用給定的字串來代表被修剪的文字
這一行用於測試文字超過這一行用於測試文字超過
滑鼠移動在文字上面,自動顯示全部內容
這一行用於測試文字超過這一行用於測試文字超過更多收起
收起
更多如果是在 td 單元格實現超出文字用省略號顯示的效果,需要在以上的基礎上再加 table 的 css 屬性table-layout: fixed
。
單元格 td 內設定超出部分用...表示
規定 table **的布局演算法值描述
automatic
預設。列寬度由單元格內容設定
fixed列寬由**寬度和列寬度設定
inherit
規定應該從父元素繼承 table-layout 屬性的值
以上的 text-overflow 有乙個缺陷,它只能對單行文字起效果,如果是多行文字就不行,如果想對多行文字也實現以省略號代替超出部分的話,可以使用下面方法(侷限於webkit核心):
w3c | css3 text-overflow 屬性
w3c | css white-space 屬性
關於文字內容溢位用點點點(…)省略號表示
解決text-overflow: ellipsis;不生效的問題
css table-layout 屬性
設定div多行文字超出時,以省略號代替
css 控制文字超出時顯示省略號
不多說,直接看 吧 doctype html html head meta charset utf 8 title 內容超出顯示省略號 title style limitword style head body p class limitword 這是內容1這是內容2這是內容3這是內容4這是內容5這...
css控制文字超出省略
單行文字操作省略 思路 1.設定inline block屬相 2.強制不換行 3.固定高度 4.隱藏超出部分 5.顯示 display inline block white space nowrap width 100 overflow hidden text overflow ellipsis 多...
css超出文字用省略號表示
css css name html 資料v for遍歷出來的 3 需求是,名字超過3個字,就顯示3個字,多於3個,顯示3個字並且顯示省略號,滑鼠懸浮顯示全部名字,用到了elementui中的tooltip,內容是後台返回,前端遍歷的,就拿到遍歷的值,加上類名就行.省略號的樣式 為 width 50p...