CSS:用overflow代替left截取指定長度字符串

2024-07-11 08:24:47

字體：大中小

供稿：網(wǎng)友

為了防止文章標(biāo)題過長超過容器(td,div)寬度而顯示成多行，我們通常要對標(biāo)題進(jìn)行處理讓其顯示在一行，通常使用的方法有兩種：一種方法是在客戶端用CSS設(shè)置容器的overflow屬性；另一種方法則是在服務(wù)器端用left函數(shù)對標(biāo)題字符串進(jìn)行截取。兩種方法通常情況下都能達(dá)到我們的目的：
<style type="text/css">
div{
width:200px;
overflow:hidden;
}
</style>
<div>輕輕松松在頁面中插入單選按鈕/復(fù)選框</div>
<div><% =Left("輕輕松松在頁面中插入單選按鈕/復(fù)選框",11) %></font></div>
今天我們來比較一下它們的優(yōu)缺點(diǎn)：
1.處理地點(diǎn)不同
一個位于客戶端，一個位于服務(wù)器端。能在客戶端的處理的盡量不要在服務(wù)器端處理，減輕服務(wù)器負(fù)擔(dān)，這一原則大家都知道了。
2.處理對象的不同
CSS是對容器屬性進(jìn)行設(shè)置，left是對標(biāo)題字符串進(jìn)行處理，哪個更合理？回答這一問題前我們先問下：為什么要對標(biāo)題長度進(jìn)行處理？為的就是"讓標(biāo)題長度不超過容器長度"即可！CSS是對容器屬性進(jìn)行設(shè)置，當(dāng)標(biāo)題長度超出容器長度時就進(jìn)行處理；而left的做法是對每個標(biāo)題進(jìn)行處理，將標(biāo)題的長度都控制在我們測試得出的長度n范圍內(nèi)[left(title,n)]，有一刀切的嫌疑。可見前者更具合理性。
3.對html處理的簡易性
這一點(diǎn)是最能說服我用CSS的理由。有時由于某些原因，我們會在一些標(biāo)題中加入了html代碼，如：<font color="#FF0000">輕輕松松在頁面中插入單選按鈕/復(fù)選框</font>，我們想要的結(jié)果應(yīng)當(dāng)是讓標(biāo)題不顯示為兩行，但還要保證仍為紅色！這點(diǎn)left做不到，要達(dá)到效果我們先得把html去除，然后對余下的字符串進(jìn)行截取，再添加html，非常的麻煩；而css完全不理會html，真正做到"只對字符串進(jìn)行處理"，非常方便，如：
<style type="text/css">
div{
width:200px;
overflow:hidden;
}
</style>
<div><font color="#FF0000">輕輕松松在頁面中插入單選按鈕/復(fù)選框</font></div>
<div><% =Left("<font color=""#FF0000"">輕輕松松在頁面中插入單選按鈕/復(fù)選框</font>",11) %></font></div>
采用left不僅達(dá)不到效果，有時還會導(dǎo)致頁面顯示出錯！相比之下，用哪一個大家心里有數(shù)。

上一篇：CSS的私有屬性小結(jié)(針對FireFox瀏覽器)

下一篇：知道嗎？H1標(biāo)簽同樣也可以美化