CSS控制的內容超過容器寬度後顯示省略符號

來源:互聯網
上載者:User
一般我們看到的比如新聞列表,為了使文字不回行,控制字數,會通過程式讓多餘的字元顯示省略符號,我們只使用CSS可以達到同樣的效果,雖然不完美。
li {     width:50px;     white-space:nowrap;     text-overflow:ellipsis;     overflow: hidden;     }
首先是一個容器,可以是div,li,td等等,先定義寬度,“white-space:nowrap”是強制在一行內顯示所有文本,不回行。“text-overflow:ellipsis”就是關鍵了。 

text-overflow是CSS3新增的屬性,IE6以上版本支援。它可以帶2個參數:clip [不顯示省略標記(...),而是簡單的裁切],ellipsis[當對象內文本溢出時顯示省略標記(...)]。所以,這個方法是不支援Firefox的。因此,我們還要加上一句overflow: hidden,讓多餘文字在ff中隱藏。 
此方法對我們網站很是管用,由於錄入框支援擴充區和基本區雙區輸入,所以從其他網站複製過來的擴充區文本可以正常現實,但是在長度計算上總是出現問題!用這個方法就可以解決了,但是普及上就...
新的東西固然好,但是相容上就存在問題了~

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.