CSS/Js文本溢出自動添加省略符號ellipsis

 　　CSS文本溢出省略符號

　　text-overflow:ellipsis

　　ext-overflow是一個比較特殊的屬性，W3C早前的文檔中(目前的文檔中沒有包含text-overflow屬性，FML!)對其的定義是:

　　Name: text-overflow-mode

　　Value: clip | ellipsis | ellipsis-word

　　clip : 　不顯示省略標記(…)，而是簡單的裁切

　　ellipsis : 　當對象內文本溢出時顯示省略標記(…)，省略標記插入的位置是最後一個字元。

　　ellipsis-word : 　當對象內文本溢出時顯示省略標記(…)，省略標記插入的位置是最後一個詞(word)。

　　例子

代碼如下
.ellipsis li{     -moz-binding: url('ellipsis.xml#ellipsis');/*相對當前html的路徑*/     overflow:hidden;     text-overflow:ellipsis;     white-space:nowrap;     width:200px; }

　　你可能也注意到了，相容Firefox瀏覽器的關鍵代碼 -moz-binding: url('ellipsis.xml#ellipsis'); 就是載入了一個XML檔案。

　　ellipsis.xml代碼：

代碼如下

<?xml version="1.0" encoding="utf-8"?> <bindings  xmlns="http://www.mozilla.org/xbl"  xmlns:xbl="http://www.mozilla.org/xbl"  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >     <binding id="ellipsis">         <content>             <xul:description crop="end" xbl:inherits="value=xbl:text">                 <children/>             </xul:description>         </content>     </binding> </bindings>

　　要問我為什麼，這些是瀏覽器的bug，我想不必深究

　　下載這個Jquery外掛程式：jQuery ellipsis plugin

　　調用方法：

代碼如下
$(document).ready(function() {    $('.ellipsis').ellipsis(); }

　　php直接進行字元截取

代碼如下

public static function chinesesubstr($str, $start, $len) { // $str指字串,$start指字串的起始位置，$len指字串長度         $strlen = $start + $len; // 用$strlen儲存字串的總長度，即從字串的起始位置到字串的總長度         for($i = $start; $i < $strlen;) {             if (ord ( substr ( $str, $i, 1 ) ) > 0xa0) { // 如果字串中首個位元組的ASCII序數值大於0xa0,則表示漢字                 $tmpstr .= substr ( $str, $i, 2 ); // 每次取出兩位字元賦給變數$tmpstr，即等於一個漢字                 $i=$i+2; // 變數自加2             } else{                 $tmpstr .= substr ( $str, $i, 1 ); // 如果不是漢字，則每次取出一位字元賦給變數$tmpstr                 $i++;             }         }         return $tmpstr; // 返回字串     } 使用方法 chinesesubstr($str, 0, 10);