text單行和多行顯示控制

2021-10-04 03:28:33 字數 1175 閱讀 8781

overflow:hidden; //溢位隱藏   (father)

text-overflow:ellipsis;//超出顯示省略號 (father)

white-space:nowrap;//強制文字在一行內顯示 (text)

overflow: hidden;(father)

text-overflow: ellipsis; // 超出顯示'...' (fatehr)

display: -webkit-box; // 將元素作為彈性伸縮盒子模型顯示 。(text)

-webkit-line-clamp: 2; // 用來限制在乙個塊元素顯示的文字的行數  (text)

-webkit-box-orient: vertical; // 設定或檢索伸縮盒物件的子元素的排列方式 (text)

有著幾個可選值:預設為white-space:normal。

normal,  表示合併空格,多個相鄰空格合併成乙個空格   換行作為空格處理,只會根據容器的大小進行自動換行。

nowrap,  nowrap和normal一樣,也合併空格,但是不會根據容器大小換行,表示不換行 效果如下

pre, 保持原始碼中的空格,有幾個空格算幾個空格顯示,同時換行只認原始碼中的換行和

標籤

pre-wrap,保留空格,並且除了碰到原始碼中的換行和

會換行外,還會自適應容器的邊界進行換行

pre-line。合併空格,換行和white-space:pre-wrap一樣,遇到原始碼中的換行和

會換行,碰到容器的邊界也會換行。

css 實現單行 多行文字顯示

1.單行顯示文字,超出顯示省略號,很容易實現 需要加寬度width屬來相容部分瀏覽 width 200px overflow hidden text overflow ellipsis white space nowrap 2.多行文字顯示,限制行數,超出顯示省略號,如下實現 width 200px...

單行和多行文字溢位顯示省略號

單行一般加這個三個屬性即可 overflow hidden text overflow ellipsis white space nowrap 多行需加下面屬性 display webkit box webkit line clamp 2 webkit box orient vertical ove...

Html中文字單行超出和多行超出顯示省略號

單行文字的溢位顯示省略號 width 200px overflow hidden text overflow ellipsis white space nowrap 加寬度width屬來相容部分瀏覽器 多行文字溢位顯示省略號 width 220px height 58px overflow hidd...