通過CSS解決文字溢出與截斷的方案

2014年辛星HTML和CSS教程夏季版

• 類型：電子資料大小：3.9M語言：中文 評分：10.0
• 標簽：

立即下載

在網站的首頁或者邊欄輸出新聞條目的時候，經常會遇到文字溢出與截斷的問題。這個問題曾經困擾了我很久，最近又重新遇到，我本著“每天進步一點點”的態(tài)度，繼續(xù)改進方法，查閱文章，幾經測試，終于確定使用純CSS的方法解決這個問題。關于這個問題，我用編程的方式解決過，也用js攻克過，現在CSS的標準屬性和各瀏覽器私有屬性的發(fā)展給我們帶來重新解決這一問題的機會，我這樣做也算是一種新的嘗試吧。

假定我要實現一組新聞條目的輸出，每個新聞標題后面附帶有新聞發(fā)表的日期，日期要完整顯示，但標題和日期的總長度超過一定數值就要截斷標題。

看完演示，重點介紹一下CSS代碼中用到的一個關鍵屬性：text-overflow 。

text-overflow: ellipsis;

這個屬性定義了當文字溢出的時候如何截斷文字，屬性值為 ellipsis 的時候就是當對象內文本溢出的時候顯示省略標記(…)，該屬性支持IE6以上的版本IE7/8/9和除Firefox以外的現代標準瀏覽器：Chrome、Safari。對于Opera，有一個相應的私有屬性：

-o-text-overflow: ellipsis;

新聞條目的結構，我是這樣寫的：

<ul id="news">
    <li><a href="#">溢出的</a><span>2012-05-30</span></li>
    <li><a href="#">溢出的時候</a><span>2012-05-31</span></li>
    <li><a href="#">溢出的時候文字</a><span>2012-06-01</span></li>
    <li><a href="#">溢出的時候文字換行</a><span>2012-06-02</span></li>
    <li><a href="#">溢出的時候文字換行并配</a><span>2012-06-03</span></li>
    <li><a href="#">溢出的時候文字換行并配合上</a><span>2012-06-04</span></li>
    <li><a href="#">溢出的時候文字換行并配合上面的</a><span>2012-06-05</span></li>
    <li><a href="#">溢出的時候文字換行并配合上面的固定</a><span>2012-06-06</span></li>
    <li><a href="#">溢出的時候文字換行并配合上面的固定高度</a><span>2012-06-07</span></li>
</ul>

下面是完整的CSS代碼：

* {
    margin:0;
    padding:0;
}

#news {
    margin-top:100px;
    margin-left:100px;
    list-style:none;
    width:156px;  /*這個寬度可以深究一下，它是不包含日期長度的*/
}
#news:after {
    content:'';
    display:block;
    clear:both;
    height:0px;
}
#news li {
    clear:both;  /*清除li中的浮動*/
}
#news li a {
    float:left;  /*標題向左浮動*/
    color:#333;
    text-decoration:none;
    font-size:13px;
    max-width:156px;  /*給標準瀏覽器一個最大寬度*/
    height:24px;
    white-space:nowrap !important;  /*強制文字不換行(標準瀏覽器)*/
    white-space:normal;  /*溢出的時候文字換行，并配合上面的固定高度，對文字進行裁切*/
    overflow:hidden;
    text-overflow:ellipsis;  /*截斷文字，顯示省略號(...)*/
    -o-text-overflow:ellipsis;  /*Opera的專用截斷文字的屬性*/
    background:none;  /*解決IE6的莫名高度BUG，試試在IE6下去掉這個屬性*/
}
#news li a:hover {
    color:#000;
    text-decoration:underline;
}
#news li span {
    float:left;  
    color:#666;
    padding-left:10px;
    margin-right:-99px; 
    _position:relative; 
}

我所說的以純CSS的方法解決文字溢出與截斷的問題基本上就是這樣。

不過，這個方法有個不得不正視的問題，那就是對firefox的兼容性，如果哪位大俠有好的辦法，請留言指教。