如果運用 css 或 php 來做 ellipsis (文字太長而省略) 的效果

在做在網頁的時候，尤其在文章呈現或條列式呈現文字的時候，因為不想要一次顯現出一堆文字而想要做摘要或部份文字顯示…這時候應該怎麼入手會比較好？

*ellipsis - 省略，在網頁上可以當作使用 ... 或 read more 的一種判斷
*text-overflow MDN

在下在網路上逛逛時發現幾個方式不錯…

1) css → text-overflow

text-overflow 應該是所有瀏覽器都有支援 ( 吧 ) ，至少我測過 IE6 ~ 11 、 Google Chrome 、 firefox 、 safari…電腦版的

大至上操作…如果是設定在 <div> ... </div> 中的話，要先記住幾個

1. 要設定顯示長度 width: ???px ( % ) 
2. 要設定不斷行 white-space: nowrap
3. 超過長度的不顯示 overflow: hidden
4. 設定文字超過時用 ... 方式省略 text-overflow: ellipsis

2) php → mb_substr

使用程式來判斷，其實作法都大同小異，但 php 在 mbstring 群中使用 mb_substr 會比直接用 substr 來的好的原因是在非英數字以外，可指定編碼來截取，比較不會出現亂碼…

以中文字為例，在 substr 中，好像一個中文 ( 全形 ) 會是 3 bytes (好像)，所以當指定長度時，會因為文字是英數字、符號、中文 ( 全形 ) 組合而無法截取剛剛好長度時，被截到部份的文字就會變亂碼…當然，也是有高手重寫 substr 這個 function ，但直接使用 mb_substr 可能比較省事一點…

在 mb_substr 中，指定好編碼之後，無論英數字、符號、中文 ( 全形 ) 都會認為是一個 ( 註：抱歉，這邊我不太敢直接確定是不是在編碼的指定下的關係…但我在 utf8 編碼下，就是一個 ) ，也就不會有亂碼的狀況。

使用方式：mb_substr( $source-string, $start-index, $catch-length, $defined-charset)

例：mb_substr('一二三四五六七八九十', 0, 3, 'utf8') ===>  output: 一二三

*3) jquery plugin ellipsis

當然，jquery 也有人做好這種方便的 plugin...

->jjenzz/jquery.ellipsis

->STAR-ZEOR/jquery-ellipsis

不過，在下會比較建議使 css 的解法，因為，不支援 script 的瀏覽器比不支援 css 的瀏覽器比較常碰到…再加上還有版本的問題…而且用 css 的解法，至少，在網頁畫面上是全部資料都留著的，如果還要再加上 script 的一些應用的話，也會比較方便…如果使用 php 的話，還要想辦法再一次取得全文資料或什麼的…

但，css 或 script 的解法其實比較適合對應到文字字數不多的情況，如果是做在文章之類的話，可能 php 的解法比較好用…例如在做 read more 或繼續閱讀的時候