一行內文本溢出的處理

日期：2013-12-16  來源：攀枝花惠康網絡公司

看到這個問題很輕易就會想到截斷文字加“…”的做法。哈哈，就是這樣。其實寫這篇日志也只是把這樣體例做個記實，因為仿佛寫了這么多次，仍是會不太記得。嘿嘿~~

==============CSS================
.text-overflow{
display:block;/*內聯對象需加*/
width:31em;
word-break:keep-all;/* 不換行 */
td{
white-space:nowrap;/* 不換行 */
text-overflow:ellipsis;/* 當對象內文本溢出時顯示省略標識表記標幟(…) ；需與overflow:hidden;一路使用。*/
=================================

}
=================================

對于表格的話，界說有一點紛歧樣：
==============CSS================
table{
overflow:hidden;/* 內容超出寬度時潛匿超出部門的內容 */
width:30em;
table-layout:fixed;/* 只有界說了表格的結構算法為fixed，下面td的界說才能起浸染。 */
}
width:100%;
word-break:keep-all;/* 不換行 */

一般的文字截斷(合用于內聯與塊)：
overflow:hidden;/* 內容超出寬度時潛匿超出部門的內容 */
text-overflow:ellipsis;/* 當對象內文本溢出時顯示省略標識表記標幟(…) ；需與overflow:hidden;一路使用。*/
white-space:nowrap;/* 不換行 */
}

注：這個東東只對單行的文字的效，如不美觀你想把它用在多行上，也只有第一行有浸染的。 這個寫法只有IE會有“…”，其它的瀏覽器文本超出指定寬度時會潛匿。