一、文本溢出處理(省略號）

（1）單行文本（適用于塊級、內(nèi)聯(lián)塊）（會寫）

在文字樣式中設(shè)置

width：設(shè)定寬度；

white-space:nowrap;（不讓文本換行）

overflow:hidden;（不顯示溢出文本）

text-overflow:ellipsis;（文本溢出是顯示省略號）

（2）多行文本

1、Webkit內(nèi)核實現(xiàn)多行溢出處理

width：設(shè)定寬度；

height:設(shè)定高度；

overflow:hidden;（不顯示溢出文本）

text-overflow:ellipsis;（文本溢出是顯示省略號）

display:-webkit-box;（形成webkit特有的伸縮盒）

-webkit-line-clamp:3;（設(shè)置文本行數(shù)，webkit獨有）

-webkit-box-orient:vertical；（設(shè)置文本排列方式，伸縮盒的特性）

（3）自定義

實現(xiàn),text多行文本溢出處理

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? .text{

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?height:字體大小的倍數(shù)（行數(shù)）;

?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?width:設(shè)定寬度；

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?overflow:hidden;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?font-size:字體大?。?/p>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?line-height:字體大小的值;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?position:relative;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?.text:after{

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?content:"...";

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?position:absolute;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?right:0;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?bottom:0;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?background-color:父元素背景顏色;（也可以寫從透明到背景顏色? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?的漸變）

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}

二、移動端的兼容

-webkit-appearance:none(表單輸入框有內(nèi)陰影)

-webkit-tap-highlight-color:rgba(255,?255,?255,?0);

height:?50px;（陰影一閃一閃的感覺）