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;

}

你可能也注意到了，兼容火狐瀏覽器的關鍵代碼 -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>

要問我爲什麼，這些是瀏覽器的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);

https://www.jianshu.com/p/4c5d46b91661