DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> 用overflow代替left截取指定長度字符串
用overflow代替left截取指定長度字符串
編輯:布局實例     

為了防止文章標題過長超過容器(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不僅達不到效果,有時還會導致頁面顯示出錯!相比之下,用哪一個大家心裡有數。
 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved