css溢出屬性overflow,css空余空間,css省略號表示

目錄
一、溢出屬性（容器的）

二、空余空間

三、省略號顯示

一、溢出屬性(容器)

1、overflow: visible/hidden(隱藏)/scroll/auto(自動)/inherit;

visible:默認值，內(nèi)容不會被修剪，會成現(xiàn)在元素框之外;

hidden:內(nèi)容會被修剪，并且其余內(nèi)容是不可見的;

scroll:內(nèi)容會被修剪，但是瀏覽器會顯示滾動條，以便查看其余的內(nèi)容

auto:如果內(nèi)容被修剪,則瀏覽器會顯示滾動條，以便查看其他的內(nèi)容(內(nèi)容超出就顯示滾動條，否則不顯示滾動條);

inherit:規(guī)定應該從父元素繼承overflow屬性的值。

overflow-x? 單獨設置x軸的overflow屬性

overflow-y?單獨設置y軸的overflow屬性

overflow還有很多其他的用法，后面我會專門開一篇文章寫overflow。

2、white-space: normal/nowrap/pre/pre-wrap/pre-line/inherit

該屬性用來設置如何處理元素內(nèi)的空白;

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

nowrap:文本不會換行，文本會在同一行上繼續(xù)，直到遇到<br/>標簽為止;

pre:空白會被瀏覽器保留，其行為方式類似HTML中的pre標簽;

pre-wrap:保留空白符序列，但是正常的進行換行;

pre-line:合并空白符序列，但是保留換行符;

inherit:規(guī)定應該從父元素繼承white-space屬性的值; (ie瀏覽器不支持此屬性值)

3、text-overflow:clip/ellipsis

clip:不顯示省略號(...) ,而是簡單的裁切;

ellipsis:當對象內(nèi)文本溢出時，顯示省略標記;

text- overflow屬性僅是...當單行文本溢出時是否顯示省略標記，并不具備其它的樣式屬性定義

要實現(xiàn)單行文本溢出時產(chǎn)生省略號的效果還需定義:

1、容器寬度: width: value;? （寬度必須生效）

2、強制文本在一行內(nèi)顯示:white-space: nowrap;

3、溢出內(nèi)容為隱藏: overflow: hidden;

4、溢出文本顯示省略號: text-overflow: ellipsis;

擴展:實現(xiàn)多行文本溢出時產(chǎn)生省略號

display: -webkit-box;?

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden;

1、-webkit-line-clamp用來限制在一個塊元素 顯示的文本的行數(shù)。為了實現(xiàn)該效果，它需要組合其他的WebKit屬性。

常見結(jié)合屬性:

2、display: -webkit-box;必須結(jié)合的屬性，將對象作為彈性伸縮盒子模型顯示。

3、-webkit-box-orient 必須結(jié)合的屬性,設置或檢索伸縮盒對象的子元素的排列方式。

適用范圍:

因使用了WebKit的CSS擴展屬性，該方法適用于WebKit瀏覽器及移動端;但文字未超出行的情況下也會出現(xiàn)省略號，可結(jié)合js優(yōu)化