1、元素的顯示及隱藏
1、實現方式:
① display
② visibility
③ overflow
2、display
① 元素的隱藏 display: none;
1) 結論:元素本身還在DOM中,只是隱藏而已
2) 元素是不占位置的
② 元素的顯示 display: block;
1) 結論:display:block可以讓行內元素、行內塊元素轉化為塊狀元素
2) display:block可以讓隱藏的元素顯示出來
3、visibility
① 元素的隱藏 visibility: hidden;
1) 元素本身還在DOM中,只是隱藏而已
2) 元素是占位置的
② 元素的顯示 visibility: visible;
4、overflow
① overflow: hidden; 盒子中多余的內容隱藏掉
② overflow: scroll; 產生滾動條 :不管內容有沒有溢出都會產生滾動條
③ overflow: auto; 溢出會有滾動條,沒有溢出不會有滾動條
5、總結
overflow:hidden 1、容器中多余的內容隱藏掉
2、清除浮動
3、消除嵌套關系的外邊距合並所帶來的影響
2、溢出文字隱藏
1、word-break:自動換行
(1) break-all:允許在單詞內換行。
(2) keep-all:只能在半角空格或連字符處換行。
(3) 注意:主要處理英文單詞
2、一行溢出文字隱藏
(1) white-space:nowrap 強制在同一行內顯示所有文本
(2) overflow:hidden 多余的內容隱藏掉
(3) text-overflow: ellipsis; 溢出的部分顯示省略號
(4) 注意:三個屬性同時使用才有效果
3、多行溢出文字隱藏
(1) display: -webkit-box;
(2) -webkit-box-orient: vertical;
(3) -webkit-line-clamp: 行數;
(4) overflow: hidden;