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() { |
php直接進行字符截取
代碼如下 | |
public static function chinesesubstr($str, $start, $len) { // $str指字符串,$start指字符串的起始位置,$len指字符串長度 使用方法 chinesesubstr($str, 0, 10); |
新聞熱點
疑難解答