html文字溢位處理方法 overflow

2021-08-21 11:48:03 字數 3219 閱讀 7108

overflow溢位

值: visible | hidden | scroll | auto | inherit

初始值: visible

應用於: 塊級元素、替換元素、表單元格

繼承性: 無

[注意]除了ie7-瀏覽器外,其他瀏覽器都不支援給table-cell元素設定overflow屬性。firefox和ie11瀏覽器不支援給table-cell元素的設定100%高度的子元素設定overflow屬性

src="" width="320" height="240">

overflow-x | overflow-y

overflow-x和overflow-y的屬性原本是ie瀏覽器獨自拓展的屬性,後來被css3採用,並標準化。overflow-x主要用來定義對水平方向內容溢位的剪下,而overflow-y主要用來定義對垂直方向內容溢位的剪下

[注意]如果overflow-x和overflow-y值相同則等同於overflow。如果overflow-x和overflow-y值不同,且其中乙個值顯式設定為visible或未設定預設為visible,而另外乙個值是非visible的值。則visible值會被重置為auto

值: visible | hidden | scroll | auto | inherit | no-display | no-content

初始值: visible

應用於: 塊級元素、替換元素、表單元格

繼承性: 無

src="" width="320" height="240">

visible

元素的內容在元素框之外也可見

[注意1]ie6-瀏覽器中元素的包含塊會延伸,使得可以包裹其超出的內容

.box

.in

左圖為ie6-瀏覽器,右圖為其他瀏覽器

[注意2]ie7-瀏覽器的按鈕(包括和兩種)存在bug,當按鈕上的文字越多時,按鈕兩側的padding就越大。通過設定overflow:visible就可解決該問題

左圖為預設情況,右圖為設定overflow後的情況

auto

如果內容被剪裁,則瀏覽器會顯示滾動條以便檢視其餘的內容

[注意]對於一般瀏覽器來說,和預設帶有overflow:auto的屬性。但ie7-瀏覽器則不同,預設存在縱向滾動條

//ie7-瀏覽器 

html

//其他瀏覽器

html

//去除頁面預設滾動條

html

scroll元素的內容會在元素框的邊界處剪裁,但瀏覽器會顯示滾動條以便檢視其餘的內容

[注意]firefox和ie8+瀏覽器在overflow:scroll或auto時,存在padding-bottom缺失現象

.box

.in

左圖為chrome瀏覽器的情況,右圖為firefox瀏覽器的情況

元素的內容會在元素框的邊界處剪裁,並且超出剪裁區域的內容不可見

no-display

當內容溢位容器時不顯示元素,類似於元素新增了display:none屬性一樣

no-content

當內容溢位視窗時不顯示內容,類似於元素新增了visibility: hidden屬性一樣

[注意]no-display和no-content這兩個屬性目前沒有瀏覽器支援  

src="" width="320" height="240">

【解決辦法】

overflow元素自身為包含塊

給父級設定position:absolute或fixed或relative

src="" width="320" height="240">

overflow元素的子元素為包含塊

在絕對定位元素和overflow元素之間增加乙個元素並設定position:absolute或fixed或relative

絕對定位元素

當overflow設定為auto或scroll或hidden時可以觸發bfc,使得overflow可以實現一些相關應用。關於bfc的詳細資訊移步至此

清除浮動影響

src="" width="320" height="240">

[注意]ie6-瀏覽器使用overflow這種方式並不能清除浮動,常用的消除浮動的方法是

.clear

.clear:after

避免margin穿透

src="" width="320" height="240">

[注意]使用overflow屬性只是避免margin穿透的很多方法中的乙個,其他的方法還有bfc化、設定padding、設定border等 

兩欄自適應布局

src="" width="320" height="240">

[注意]使用overflow屬性的場景限制比較明顯,常用的兩欄自適應布局的方法:

.cell
選項卡

123

4

body 

ul a

.show

.show-in

#one

#two

#three

background-color:pink;
}

.con

.con-in

src="" width="320" height="240">

好的**像粥一樣,都是用時間熬出來的

html文字溢位處理

在前端開發的實際操作中,我們在寫頁面遇到此類問題時直接複製下列 使用即可.單行文字省略超出部分,顯示省略號 overflow hidden 超出部分隱藏 text overflow ellipsis 超出部分以省略號顯示 white space nowrap 超出部分強制不換行多行文字省略超出部分,...

vue多行文字溢位處理

在vue多行文字溢位的問題,工作中需要相容火狐,ie,和谷歌,新增文字kit字首的那種方式火狐和ie不相容,找到一種萬能的方法,如下 mounted fn.xdlines.defaults,options var this this for var k 0 k this.length k var s...

CSS溢位處理

css定義中的overflow屬性,封裝了溢位處理的這個概念。在盒子模型中的代表標籤的矩形物件,可以通過css樣式來定義內容區域的高度與寬度,當這個內容無法容納子矩形物件時,對於這些子矩形物件必須決定怎麼顯示,顯示什麼,這樣的處理規則就稱為溢位處理。瀏覽器在做顯示運算的時候,會依照溢位處理,來計算內...