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

為了防止文章標題過長超過容器(td,div)寬度而顯示成多行，我們通常要對標題進行處理讓其顯示在一行，通常使用的方法有兩種：一種方法是在客戶端用CSS設置容器的overflow屬性；另一種方法則是在服務器端用left函數對標題字符串進行截取。兩種方法通常情況下都能達到我們的目的：

<style type="text/css"> div{ width:200px; overflow:hidden; } </style> <div>輕輕松松在頁面中插入單選按鈕/復選框</div> <div><% =Left("輕輕松松在頁面中插入單選按鈕/復選框",11) %></font></div>

今天我們來比較一下它們的優缺點：

1.處理地點不同

一個位于客戶端，一個位于服務器端。能在客戶端的處理的盡量不要在服務器端處理，減輕服務器負擔，這一原則大家都知道了。

2.處理對象的不同

CSS是對容器屬性進行設置，left是對標題字符串進行處理，哪個更合理？回答這一問題前我們先問下：為什么要對標題長度進行處理？為的就是"讓標題長度不超過容器長度"即可！CSS是對容器屬性進行設置，當標題長度超出容器長度時就進行處理；而left的做法是對每個標題進行處理，將標題的長度都控制在我們測試得出的長度n范圍內[left(title,n)]，有一刀切的嫌疑。可見前者更具合理性。

3.對html處理的簡易性

這一點是最能說服我用CSS的理由。有時由于某些原因，我們會在一些標題中加入了html代碼，如：<font color="#FF0000">輕輕松松在頁面中插入單選按鈕/復選框</font>，我們想要的結果應當是讓標題不顯示為兩行，但還要保證仍為紅色！這點left做不到，要達到效果我們先得把html去除，然后對余下的字符串進行截取，再添加html，非常的麻煩；而css完全不理會html，真正做到"只對字符串進行處理"，非常方便，如：

<style type="text/css"> div{ width:200px; overflow:hidden; } </style> <div><font color="#FF0000">輕輕松松在頁面中插入單選按鈕/復選框</font></div> <div><% =Left("<font color=""#FF0000"">輕輕松松在頁面中插入單選按鈕/復選框</font>",11) %></font></div>

采用left不僅達不到效果，有時還會導致頁面顯示出錯！相比之下，用哪一個大家心里有數。