DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> CSS/Js文本溢出自動添加省略號ellipsis
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>

</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);

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved