Xoops佈景區塊標題使用jQuery函數str.substr()限制輸出字元總數-教學撰寫:徐嘉裕Neil hsu

在開發xoops佈景時如果標題字數太長，我們通常會設個預設高度然後用overflow: hidden;隱藏被折行的內容，正常條件下這部分是沒問題的，但如果佈景標題想做些特別的設計，像是在文字右邊加上一些裝飾圖文，如果沒有限制輸出字元總數就會很麻煩!

舉例來說，如果要做文字右邊為斜角裝飾，文字區塊為display: inline;線內元素，文字沒段行之前都是正常的像下圖這樣

但如果文字段行後，原本的斜角就會跑到段行的結束點去

這樣畫面就不好看了，原因如下圖說明：

解決方法只能用jQuery函數str.substr()限制輸出字元總數，讓文字不要折行，這樣右邊距就不會跑到折行的下方，方法如下!


1、在佈景的<{$block.title}>標籤前面加上class定義好讓jQuery取值

<span class='blocktitle blocktitleto<{$block.id}>' name='<{$block.id}>'><{$block.title}></span>

備註說明：<{$block.id}>為區塊的id，我們用它來當作class的前綴


2、在佈景的js檔加上以下code

//顯示字元限制
$(document).ready(function(){
$(".blocktitle").each(function(index) {
$idname = $(this).attr("name");
var str=$(".blocktitleto"+$idname).text();
$(".blocktitleto"+$idname).text(str.substr(0,25));
});
});

備註說明str.substr(0,25) 藍字為擷取字串起始點，紅字為擷取字元總數


然後來看看剛剛被折行的區塊是否正常顯示

因為字元有輸出限制所以沒折行，右邊的斜線裝飾框就能正常顯示在區塊的右邊距了!


備註說明：如果是自行開發模組不用那麻煩，只要在php輸出加上
mb_substr($Title,0,25,'utf8');  即可!

有需要的朋友參考看看!


工作心得教學撰寫：徐嘉裕 Neil hsu