單行文本的控制，以前是由程序員完成的，實現(xiàn)截字效果。

　　今天介紹的方法兼容ie ff，看下面的詳細(xì)介紹：

　　為了更符合實際，用一個div裝起要調(diào)試的內(nèi)容,并為這個div定義一個寬度。

　　例如：

css代碼：

div{width:200px;}

html代碼：

<div>
<span>網(wǎng)頁設(shè)計-中國網(wǎng)頁設(shè)計，網(wǎng)頁制作第一站 - www.survivalescaperooms.com</span>
</div>

　　在ie中實現(xiàn)是非常簡單的，css 如下：

span {
display:block;
width:200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

　　但在ff中用上面的樣式是實現(xiàn)不了的,因為text-overflow: ellipsis;是ie中特有的(非css標(biāo)準(zhǔn))。現(xiàn)在在ff下看到的僅僅只是把溢出的內(nèi)容切除了，說到"溢出切除",這下說到點子上了，在ff中實現(xiàn)就要用到非常規(guī)的方法，一個標(biāo)簽作切除內(nèi)容，再加一個標(biāo)簽作填補省略號用，并且加起來的長度就能超過容器的寬度，本例指的就是div的寬度200px，實現(xiàn)的想法就是這樣。那么繼續(xù)進(jìn)一試驗，關(guān)于切除內(nèi)容，這個已經(jīng)基本上解決了，那就來說補省略號，不用js，用css實現(xiàn)的話就要用到偽對象after,偽對象不懂的就要先去溫故或百度一下。先從html下手，為span標(biāo)簽外再加一層p標(biāo)簽（當(dāng)然你也可以加其它標(biāo)簽的）

html代碼：

<div>
<p><span>網(wǎng)頁設(shè)計-中國網(wǎng)頁設(shè)計，網(wǎng)頁制作第一站 - www.survivalescaperooms.com</span><p>
</div>

　　我們再為這個p標(biāo)簽加樣式。

css：
p:after{
content:"...";
}

　　這樣還不行，因為省略號是有寬度的，這樣省略號就跳到一下行了，下面要做的就是讓span 加省略號的寬度不大于容器寬度(準(zhǔn)確的說是相等)，并且讓省略號緊跟內(nèi)容的內(nèi)容，下就是解決上面這些問題的css樣式：

p{clear:both;}
p span{float:left;
max-width:175px;
}
p:after{
content:"...";
}

　　這里還要補充的一點是關(guān)于p span 的寬度用了"max-width"這個屬性，ie不能解釋該屬性，而ff可以,這樣就避開了ie對span寬度的重新應(yīng)用。上面說得有亂，歸納如下：

html代碼：

<div>
<p><span>網(wǎng)頁設(shè)計-中國網(wǎng)頁設(shè)計，網(wǎng)頁制作第一站 - www.survivalescaperooms.com</span><p>
</div>

css代碼：

div{
width:200px;/*容器的基本定義*/
height:200px;
background-color:#eee;
}
/* ie下的樣式 */
p span{
display: block;
width:200px;/*對寬度的定義,根據(jù)情況修改*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}/* ff 下的樣式 */
p{clear:both;}
p span{float:left;
max-width:175px;
}
p:after{
content:"...";
}