css元素的顯示及隱藏 文字隱藏

2022-08-23 20:00:11 字數 1302 閱讀 7647

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;

顯示 隱藏 隱藏檔案

顯示隱藏檔案 開啟終端,輸入命令 該命令將finder的隱藏檔案顯示出來,並重新啟動finder。隱藏隱藏檔案 開啟終端,輸入命令 該命令將finder的隱藏檔案隱藏出來,並重新啟動finder。顯示以.開頭的檔案 在finder中,按快捷鍵command shift 可以顯示隱藏檔案 資料夾,再按...

顯示隱藏文字內容 2020 11 20

自學js,錯誤案例 value可得到屬性值或者更改屬性值 判斷value值是否為空,所以用 doctype html content type content text html charset utf 8 input style head 1 value可得到屬性值或者更改屬性值 text val...

CSS隱藏文字的幾個方法

通常偏移掉字型的方式是 1 使用text indent 9999px 可是他有乙個侷限性 他只適用於塊級元素block而我們往往有時候想偏移掉的a上的字型所以問題就來了text indent 9999px 雖然用起來比較愜意將a轉化成block的話 往往 他身後的的元素就被他趕到下一行了如果正好這個...