CSS中的Overflow屬性可以用來控制元素內容的溢出,當元素的內容超出指定的范圍時,會隱藏溢出的內容或通過滾動條來展示。
overflow: visible | hidden | scroll | auto;
其中:
visible
:即使元素的內容溢出,也不會修改元素的尺寸或形狀。hidden
:把超出元素框的部分裁剪掉,不可見。scroll
:把超出元素框的部分剪裁掉,同時顯示滾動條,可以通過滾動來查看超出的內容。auto
:如果溢出,顯示滾動條;否則不顯示滾動條。
除了控制元素的溢出,CSS還提供了text-overflow屬性來控制文本的溢出。當設置了文字溢出時,超出范圍的文本可以使用省略號或其他方式進行隱藏。
text-overflow: clip | ellipsis | <string>;
其中:
clip
:文本溢出時截斷文本。ellipsis
:當文本溢出時,顯示省略號來隱藏超出的文本。<string>
:自定義的字符串,當溢出時使用該字符串隱藏超出的文本。
需要注意的是,text-overflow屬性只在以下情況下才有效果:
- 必須設置了width、white-space和overflow屬性。
- 元素的內容必須溢出了元素的框。
- 元素中只能包含一個行內元素或一個塊級元素,不能同時有多個元素。
總結一下,CSS中的Overflow和text-overflow屬性可以幫助我們控制元素內容的溢出和文本的溢出,使超出的內容能夠以合適的方式進行展示或隱藏。
上一篇css 超出三點
下一篇css 設置背景高斯模糊