單行隱藏: overflow: hidden;/*超出部分隱藏*/ text-overflow:ellipsis;/* 超出部分顯示省略號 */ white-space: nowrap;/*規定段落中的文本不進行換行 */ 多行隱藏: 多行隱藏需要 ...
單行超出隱藏省略號 overflow: hidden text overflow:ellipsis white space: nowrap 多行超出隱藏省略號 display: webkit box webkit box orient: vertical webkit line clamp: overflow: hidden ...
2020-04-28 09:36 0 6234 推薦指數:
單行隱藏: overflow: hidden;/*超出部分隱藏*/ text-overflow:ellipsis;/* 超出部分顯示省略號 */ white-space: nowrap;/*規定段落中的文本不進行換行 */ 多行隱藏: 多行隱藏需要 ...
多行一出隱藏 ...
html css ...
效果如圖1-1。 效果圖1-1 css代碼: white-space: nowrap;overflow: hidden; text-overflow: ellipsis; display: inline-block; ...
文本超出部分隱藏,總結兩種方法。 1、單行隱藏 html代碼 css代碼 .mi { width: 200px; overflow: hidden; text-overflow: ellipsis; white-space:nowrap ...
未做隱藏處理 執行結果: 1、1行超出部分省略號 效果: 2、多行超出部分隱藏(目前只能在chrome瀏覽器中使用,其他瀏覽器不兼容) 效果 ...
單行 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; //多行超出長度隱藏 overflow: hidden; text-overflow: ellipsis; display ...
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8 ...