html文字控制顯示字數超出省略號的方法

PHPz
發布: 2018-05-18 17:02:38
原創
12964 人瀏覽過

html文字控制顯示字數超出的方法怎麼解決? 也就是文字溢位控制顯示字數,table文字溢位控制td顯示字數

看到標題你一定很輕易就會想到截斷文字加省略號「...」的做法。哈哈,就是這樣。其實寫這篇日誌也只是把這樣方法做個記錄,因為似乎還有很多人不記得碰到這樣的情況該如何處理。

下圖就是php中文網(www.php.cn)超出字數加省略號的顯示效果

html文字控制顯示字數超出省略號的方法

首先,先解釋一下,一般用DIV +css的容器中文字超出長度會浮動到框外或把框撐大,這個一般容易解決,但是我今天就遇到了這樣的問題:在IE6下測試頁面沒反應,在IE8下測試頁面卻正常處理了溢出文字,我就鬱悶了,這個溢出處理不是IE特有的嗎?怎麼IE6卻不正常。後來網上查了才知道,原來IE6只支援DIV內寫上溢出處理才有用,而IE6以上版本寫在

  • 裡面才可以,所以我把相同的溢出處理代碼寫在了DIV中和中就正常了,汗啊! ! !一下是我的處理截圖:
    下面是html頁面的程式碼:

    html文字控制顯示字數超出省略號的方法

    #下面是效果圖(處理後就一樣了):

    html文字控制顯示字數超出省略號的方法

    下面是上面兩個溢位處理的程式碼:

    html文字控制顯示字數超出省略號的方法

    以下是一些網路上的處理方法,很值得參考:

    一般的文字截斷(適用於內嵌與區塊):
     [www.mb5u.com]

    .text-overflow {
    display:block;
    width:31em;
    word-break:keep-all;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    }
    登入後複製

    對於表格文字溢出的定義:
    ww.m5u.com]

    table{
    width:30em;
    table-layout:fixed;
    }
    td{
    width:100%;
    word-break:keep-all;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    }
    登入後複製

    需要你注重的是,這個東東只對單行的文字的效,假如你想把它用在多行上,也只有第一行有作用的。 這個寫法只有IE會有“...”,其它的瀏覽器文字超出指定寬度時會隱藏。

    深入研究在opera和Firefox中文字溢出處理:
    [問題]
    最近發現我的space在opera下瀏覽時, 右半邊竟然會變得超寬(我使用的是跟你一模一樣的排版模式), 以至於超出1024的顯示範圍、最大化窗口情況下竟然還出現了橫向滾動條. 按照你提供的方法, 把所有的模組全刪除後, 還是這樣. 百思不得其解...
    用另外一個通行證開通了一個新的space, 採用同樣的佈局排版, 在opera下卻是沒有問題!
    難道是因為我期間測試了擴展space右側空間, 以及添加過第二個html模組[之後又刪除了]等操作, 導致將我的space程式碼搞亂了?

    ##[原因]

    不同瀏覽器相容性問題, 確切的說, 是不同瀏覽器對CSS標準執行的問題. 首先你應該知道不僅僅是Opera顯示不正常, Firefox也不能. 由於Firefox是公認的標準瀏覽器[當然, Opera也是], 且市場份額更高, 因此拿Firefox來做認證.

    [舉例]

    ##1. Firefox不支援ellipsis (…)屬性,也就是很長的一段字串會顯示省略號. 

    text-overflow: ellipsis;
    這個在空間日誌編輯頁面的日誌選項裡就有應用, 你如果輸入很長的類別名, 回來編輯該日誌會發現原來的類別名在IE中會顯示前面部分, 後面直接用省略號代替, 而在Firefox等瀏覽器下會顯示很長直到撐破介面架構.

    2. 在Firefox, 

    style="overflow:hidden"只工作於

    而不是

    等等3. 在固定連結部分, IE瀏覽器能夠應用word-wrap屬性對超出寬度的字符串進行換行, 具體的就是固定鏈接的地址長度一旦超出300px就自動折行了. 
    .bvwordwrap{word-wrap:break-word;width:300px;left:0}
    在Firefox等瀏覽器中, word-wrap這個屬性是不被辨識的, 因為該CSS屬性不符合W3的標準, 應該用white-space:normal;來代替, 這樣在FireFox和IE下就都能正確換行. 而且要注意, 單字間的空格不能用 來代替, 不然不能正確換行.

    #【相關推薦】

    1. 

    css解決文字字數超出顯示省略號…的方法(單行、多行文字)

    #2. 

    用css解決標題顯示字數超出的方法

    3. 

    #線上html免費影片教學

  • 以上是html文字控制顯示字數超出省略號的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

    相關標籤:
    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    最新問題
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!