8.jpg

設計網頁版面當中,有時候會有內容塞不下某容器div的情形,想將寫不下的容器加入「…」的兩種做法,分別為CSS、Javascript。

CSS的做法是你要先給你的容器一個寬度,再加入以下語法。

white-space: nowrap; /*段落中文字不換行*/

overflow: hidden; /*捲軸隱藏*/

text-overflow: ellipsis; /*文字溢出的處理時加上…*/

關於text-overflow的屬性,可以直接點此連結至W3C的說明頁面。此方法要考慮到瀏覽器的支援性!

 

Javascript的做法使之支援各瀏覽器,將它寫為一個函式,在需要處理某容器時呼叫函式即可,比如說部落格中每篇文章的內文概要。

function shorten(text, maxLength) {
var someContent = text;
if (someContent.length > maxLength) {
someContent = someContent.substr(0,maxLength-3) + “…";
}
return someContent; //如要複製請記得符號的半全形
}

文章標籤
創作者介紹
創作者 Askie 的頭像
Askie

Askie's blog|與大家分享美好的生活、推薦實用的everything!

Askie 發表在 痞客邦 留言(0) 人氣()