一、容器溢出

語法：overflow:visible|hidden|scroll|auto|inherit;

visible:默認值，溢出內容不會被裁剪，正常顯示

hidden: 溢出內容隱藏不可見

scroll: 當容器溢出時，溢出的內容以滾動條的形式查看（當容器沒有溢出時，也會顯示一個默認的滾動條）

auto: 當容器溢出時，以滾動條的形式查看剩余內容，沒有溢出時，不會顯示滾動條

inherit:規定繼承父元素的overflow屬性

註：還可以針對某一個方向的溢出做設置

語法：

overflow-x:visible|hidden|scroll|auto; (水平方向溢出設置)

overflow-y:visible|hidden|scroll|auto; (垂直方向溢出設置)

二、文本溢出設置

語法：text-overflow:clip(默認值)|ellipsis;

clip:不顯示省略號，簡單的裁剪

ellipsis:顯示省略號

三、省略號的設置

必須滿足四個條件，缺一不可：

1）設置一定的寬度 width:value;

2）設置文本強制在一行顯示 white-space:nowrap;

3）文本溢出隱藏 overflow:hidden;

4）溢出顯示省略號 text-overflow:ellipsis;

註：上述設置方法主要針對單行文本顯示省略號，如果遇到多行文本需要顯示省略號一般由後端來做處理

擴展

white-space:normal|nowrap|pre|pre-wrap|pre-line;

normal:默認值，空白符會被瀏覽器忽略

nowrap:不換行，強制在一行顯示

pre: 強制在一行顯示，保留空白符

pre-wrap: 保留空白符，自動換行

pre-line:合並空白符，保留換行符

從零開始學習前端開發 — 4、容器溢出