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;
}
你可能也注意到了,兼容火狐浏覽器的關鍵代碼 -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);