解決dedecms標題過長顯示不完整,實現截斷標題加省略號的方法

Posted by

這個問題由來已久,但是百度里搜了一下,發現老的方法有一定的錯誤。主要是隨著瀏覽器的不斷更新,各個瀏覽器對CSS的支持越來越好,原來不能實現的方法,現在可以實現了。

本文解決dedecms標題過長導致排版混亂,並且實現截斷標題、標題階段後末尾加省略號的方法,正是基於CSS的。

下面是詳細的流程:

第一步:

進入dedecms的後台–—系統——系統設置——系統基本參數–—其他選項——文檔標題最大長度。默認是60,改為你要的長度(我這裡改為了250,不要問我為什麼。)

第二步:

登陸phpmyadmin,尋找網站資料庫,改資料庫表dede_archives表裡面的title欄位,原默認是60,(這裡同樣改為250)。

特別備註:UTF-8編碼中,1個漢字佔用的是3個位元組;GBK編碼中,1個漢字佔用的是2個位元組。我們在dedecms里調用文章列表的時候,會發現titlelen如果設置為30,那麼最多只顯示11個漢字。

第三步:

進入dedecms後台,在「模板管理」中的「標籤源碼管理」,找到arclist.lib.php。點擊「編輯」,搜索「$titlelen = AttDef($titlelen,30)」這條語句。把裡面的30,改為60或者你想要的數值。

第四步:

修改網站的CSS樣式表,修改a標籤的全局樣式;

a{ text-decoration:none; text-overflow:ellipsis; white-space: nowrap; overflow: hidden;}

overflow:hidden;   overflow 屬性規定當內容溢出元素框時發生的事情。hidden值規定,內容會被修剪並且其餘內容是不可見的。

text-overflow:ellipsis;  text-overflow 屬性規定當文本溢出包含元素時發生的事情。ellipsis值規定,顯示省略符號來代表被修剪的文本。老版本的firefox不支持這一屬性,目前來說所有主流的瀏覽器,包括最新版的firefox都支持這一屬性啦。

white-space: nowrap;  white-space 屬性設置如何處理元素內的空白。值nowrap規定,文本不會換行,文本會在在同一行上繼續,直到遇到 <br> 標籤為止。正是因為有了這個樣式,文本才會溢出元素,才會觸發text-overflow和overflow屬性。才導致文本內容被截斷,以及顯示省略號。

這樣,僅僅通過a標籤的全局樣式的修改,我們就實現了自己想要的效果。

第五步:

文章列表樣式的修改,必須給列表增加{display:block;}樣式,並且為li元素設置寬度;

display:block;  display屬性規定元素應該生成的框的類型。值block規定,元素將顯示為塊級元素,此元素前後會帶有換行符。

上文提到white-space:nowrap,會導致文本佔用一整行,直到遇到<br>標籤為止。如果不加display:block,會導致文本無法結束。text-overflow和overflow根本就不知道文本時在那裡結束的,也就必然無法生效了。

給li元素加上display:block,會自動給li元素結尾加上<br>。white-space: nowrap,遇到<br>會在這裡停止。text-overflow和overflow屬性知道文本在那裡結束,也就生效了。

在這裡,不得不佩服CSS開發者們,真的是巧奪天工的設計思路啊。這樣來寫CSS,真的感覺自己是個藝術家哈。O(∩_∩)O哈哈~,不小心又自戀了一把。

第六步:

修改調用的文檔列表的長度,titlelen其實就是title的length的縮寫,翻譯成中文就是標題的長度。

<ul>
{dede:arclist titlelen=’60’ row=’8′ typeid=”37″}
<li><a href=”[field:arcurl/]”>[field:title/]</a></li>
{/dede:arclist}
</ul>

樣式設置好以後,你的titlelen只管往大的設置。但是記得a的寬度,千萬不能少於li的寬度,只能比li的寬度大才行。所以只管把這個值往大的設吧,反正再大也都會截斷的。相反,太短太細,就沒有效果了。

Leave a Reply

郵箱地址不會被公開。 必填項已用*標註

此站點使用Akismet來減少垃圾評論。了解我們如何處理您的評論數據