單行文本的控制，以前是由程序員完成的，實(shí)現(xiàn)截字效果。
　　今天介紹的方法兼容IE FF，看下面的詳細(xì)介紹：
　　為了更符合實(shí)際，用一個(gè)div裝起要調(diào)試的內(nèi)容,并為這個(gè)div定義一個(gè)寬度。
　　例如：
css代碼：
div{width:200px;}
html代碼：
<div>
<span>腳本之家-中國(guó)網(wǎng)頁(yè)設(shè)計(jì)，網(wǎng)頁(yè)制作第一站 - www.dbjr.com.cn</span>
</div>
　　在IE中實(shí)現(xiàn)是非常簡(jiǎn)單的，CSS 如下：
span {
display:block;
width:200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
　　但在FF中用上面的樣式是實(shí)現(xiàn)不了的,因?yàn)閠ext-overflow: ellipsis;是IE中.特有的(非CSS標(biāo)準(zhǔn))。現(xiàn)在在FF下看到的僅僅只是把溢出的內(nèi)容切除了，說(shuō)到"溢出切除",這下說(shuō)到點(diǎn)子上了，在FF中實(shí)現(xiàn)就要用到非常規(guī)的方法，一個(gè)標(biāo)簽作切除內(nèi)容，再加一個(gè)標(biāo)簽作填補(bǔ)省略號(hào)用，并且加起來(lái)的長(zhǎng)度就能超過(guò)容器的寬度，本例指的就是DIV的寬度200px，實(shí)現(xiàn)的想法就是這樣。那么繼續(xù)進(jìn)一試驗(yàn)，關(guān)于切除內(nèi)容，這個(gè)已經(jīng)基本上解決了，那就來(lái)說(shuō)補(bǔ)省略號(hào)，不用JS，用CSS實(shí)現(xiàn)的話就要用到偽對(duì)象after,偽對(duì)象不懂的就要先去溫故或百度一下。先從HTML下手，為span標(biāo)簽外再加一層p標(biāo)簽（當(dāng)然你也可以加其它標(biāo)簽的）
html代碼：
<div>
<p><span>腳本之家-中國(guó)網(wǎng)頁(yè)設(shè)計(jì)，網(wǎng)頁(yè)制作第一站 - www.dbjr.com.cn</span><p>
</div>
　　我們?cè)贋檫@個(gè)P標(biāo)簽加樣式。
CSS：
p:after{
content:"...";
}
　　這樣還不行，因?yàn)槭÷蕴?hào)是有寬度的，這樣省略號(hào)就跳到一下行了，下面要做的就是讓span 加省略號(hào)的寬度不大于容器寬度(準(zhǔn)確的說(shuō)是相等)，并且讓省略號(hào)緊跟內(nèi)容的內(nèi)容，下就是解決上面這些問(wèn)題的CSS樣式：
p{clear:both;}
p span{float:left;
max-width:175px;
}
p:after{
content:"...";
}
　　這里還要補(bǔ)充的一點(diǎn)是關(guān)于p span 的寬度用了"max-width"這個(gè)屬性，IE不能解釋該屬性，而FF可以,這樣就避開了IE對(duì)SPAN寬度的重新應(yīng)用。上面說(shuō)得有亂，歸納如下：
html代碼：
<div>
<p><span>腳本之家-中國(guó)網(wǎng)頁(yè)設(shè)計(jì)，網(wǎng)頁(yè)制作第一站 - www.dbjr.com.cn</span><p>
</div>
css代碼：
div{
width:200px;/*容器的基本定義*/
height:200px;
background-color:#eee;
}
/* IE下的樣式 */
p span{
display: block;
width:200px;/*對(duì)寬度的定義,根據(jù)情況修改*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}/* FF 下的樣式 */
p{clear:both;}
p span{float:left;
max-width:175px;
}
p:after{
content:"...";
}

最新評(píng)論