css溢出屬性overflow,css空余空間,css省略號表示
目錄
一鹏漆、溢出屬性（容器的）
二抑钟、空余空間
三德迹、省略號顯示
一、溢出屬性(容器)
1寺枉、overflow: visible/hidden(隱藏)/scroll/auto(自動(dòng))/inherit;
visible:默認(rèn)值抑淫，內(nèi)容不會(huì)被修剪，會(huì)成現(xiàn)在元素框之外;
hidden:內(nèi)容會(huì)被修剪姥闪，并且其余內(nèi)容是不可見的;
scroll:內(nèi)容會(huì)被修剪始苇，但是瀏覽器會(huì)顯示滾動(dòng)條，以便查看其余的內(nèi)容
auto:如果內(nèi)容被修剪,則瀏覽器會(huì)顯示滾動(dòng)條筐喳，以便查看其他的內(nèi)容(內(nèi)容超出就顯示滾動(dòng)條催式，否則不顯示滾動(dòng)條);
inherit:規(guī)定應(yīng)該從父元素繼承overflow屬性的值函喉。
overflow-x? 單獨(dú)設(shè)置x軸的overflow屬性
overflow-y?單獨(dú)設(shè)置y軸的overflow屬性
overflow還有很多其他的用法，后面我會(huì)專門開一篇文章寫overflow荣月。
2管呵、white-space: normal/nowrap/pre/pre-wrap/pre-line/inherit
該屬性用來設(shè)置如何處理元素內(nèi)的空白;
normal:默認(rèn)值，空白會(huì)被瀏覽器忽略哺窄，
nowrap:文本不會(huì)換行捐下，文本會(huì)在同一行上繼續(xù)，直到遇到<br/>標(biāo)簽為止;
pre:空白會(huì)被瀏覽器保留萌业，其行為方式類似HTML中的pre標(biāo)簽;
pre-wrap:保留空白符序列坷襟，但是正常的進(jìn)行換行;
pre-line:合并空白符序列，但是保留換行符;
inherit:規(guī)定應(yīng)該從父元素繼承white-space屬性的值; (ie瀏覽器不支持此屬性值)
3生年、text-overflow:clip/ellipsis
clip:不顯示省略號(...) ,而是簡單的裁切;
ellipsis:當(dāng)對象內(nèi)文本溢出時(shí)婴程，顯示省略標(biāo)記;
text- overflow屬性僅是...當(dāng)單行文本溢出時(shí)是否顯示省略標(biāo)記，并不具備其它的樣式屬性定義
要實(shí)現(xiàn)單行文本溢出時(shí)產(chǎn)生省略號的效果還需定義:
1抱婉、容器寬度: width: value;? （寬度必須生效）
2排抬、強(qiáng)制文本在一行內(nèi)顯示:white-space: nowrap;
3、溢出內(nèi)容為隱藏: overflow: hidden;
4授段、溢出文本顯示省略號: text-overflow: ellipsis;
擴(kuò)展:實(shí)現(xiàn)多行文本溢出時(shí)產(chǎn)生省略號
display: -webkit-box;?
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
1、-webkit-line-clamp用來限制在一個(gè)塊元素 顯示的文本的行數(shù)番甩。為了實(shí)現(xiàn)該效果侵贵，它需要組合其他的WebKit屬性。
常見結(jié)合屬性:
2缘薛、display: -webkit-box;必須結(jié)合的屬性窍育，將對象作為彈性伸縮盒子模型顯示。
3宴胧、-webkit-box-orient 必須結(jié)合的屬性,設(shè)置或檢索伸縮盒對象的子元素的排列方式漱抓。
適用范圍:
因使用了WebKit的CSS擴(kuò)展屬性，該方法適用于WebKit瀏覽器及移動(dòng)端;但文字未超出行的情況下也會(huì)出現(xiàn)省略號恕齐，可結(jié)合js優(yōu)化
