html文字溢位處理方法 overflow

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

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

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

auto

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

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

//ie7-瀏覽器 

html
//其他瀏覽器
html
//去除頁面預設滾動條
html

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

.box

.in

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

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

絕對定位元素

清除浮動影響

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

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

.clear

.clear:after

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

#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樣式來定義內容區域的高度與寬度，當這個內容無法容納子矩形物件時，對於這些子矩形物件必須決定怎麼顯示，顯示什麼，這樣的處理規則就稱為溢位處理。瀏覽器在做顯示運算的時候，會依照溢位處理，來計算內...