CSS3文字與字體 text-overflow 與 word-wrap
阿新 • • 發佈:2018-11-20
small png size ... normal 內容 tab 控制 cell
text-overflow 對象內的文本溢出部分采用省略“...”標記 或者 剪切;
text-overflow:elip(超出容器邊界的內容剪切掉) | ellipsis(超出容器邊界內容省略標示)
white-space : nowrap ; 強制文本在一行內顯示,代碼的效果如下圖:
white-space : nowrap; 控制單行顯示
text-overflow : ellipsis; 控制超出容器邊界省略標示
overflow : hidden; 超出容器邊界自動隱藏
width : 200px; 設置容器寬度
white-space:nowrap; |
|
控制單行顯示,文本超出邊界部分自動隱藏,超出容器邊界的部分文本以省略號標示。 |
text-overflow:ellipsis; overflow:hidden; width:200px; height:20px; background:#ccc; |
|
沒有控制容器必須單行顯示,自動換行了;overflow:hidden ,高度超出部分也會自動隱藏; |
white-space:nowrap; text-overflow:ellipsis; width:200px; background:#ccc; |
|
設置必須單行顯示,沒有設置超出容器邊界部分隱藏,text-overflow設置無效; |
white-space:nowrap; text-overflow:clip; width:200px; background:#ccc; |
|
設置必須單行顯示,沒有設置超出容器邊界部分隱藏,text-overflow設置無效; |
white-space:nowrap; text-overflow:clip; overflow:hidden; width:200px; background:#ccc; |
|
控制單行顯示,文本超出邊界部分自動隱藏,超出容器邊界的部分文本直接剪切。 |
word-wrap:normal | break-word
normal為瀏覽器默認值,break-word設置在長單詞或 URL地址內部進行換行
CSS3文字與字體 text-overflow 與 word-wrap