富二代APP

  • 河南網站建設-鄭州網站設計-鄭州網站建設-手機建站-鄭州建站-上海建站

  • 專注網站建設 服務熱線: 13061801310

當前位置:好東東網 > 近期動態 > 網站建設觀點 > 正文

用CSS就能完美解決文字溢出的處理辦法

發布時間:2016-10-25 | 發布者:  | 瀏覽次數:
用CSS就能完美解決文字溢出的處理辦法
經常會在項目中碰到文字溢出的情況,解決起來也比較麻煩,而最大的麻煩還是在瀏覽器的兼容問題上。至少到目前為止,我還沒找到用CSS就能完美解決文字溢出的辦法。前幾天就再次碰到這個問題,之后一查,發現和迅雷的一個頁面重構的面試題驚奇的相似,仔細一想,也沒啥巧合不巧合的,只能說這種情況太常見了。
要求是這樣的:一個新聞列表,新聞標題后緊跟著日期,新聞標題的寬度超過一定的寬度就要自動截斷,但是日期必須顯示完整。
花了點時間研究了下,最終的效果對于瀏覽器的兼容不是很理想,但我覺得也是很不錯了。
查看演示
看到這個要求,基本上就知道HTML的結構該怎么寫了,一個有序列表(ol+li):
<ol id="news-list">
<li><a href="#">毛毛貓系列漫畫</a><span>2010-09-18</span></li>
<li><a href="#">一個網頁設計需求方眼中的網頁設計</a><span>2010-09-18</span></li>
<li><a href="#">如何應對騙稿的客戶</a><span>2010-09-18</span></li>
<li><a href="#">平面設計師:一個涂有虛名的職業</a><span>2010-09-18</span></li>
<li><a href="#">站在十字路口的網站設計師</a><span>2010-09-18</span></li>
<li><a href="#">設計師請別把自己不當人。</a><span>2010-09-18</span></li>
<li><a href="#">什么樣的包裝才叫做有新意的包裝呢?</a><span>2010-09-18</span></li>
<li><a href="#">尋隱活動尋找網頁設計開發高手</a><span>2010-09-18</span></li>
<li><a href="#">求平面設計同行們的經驗指引</a><span>2010-09-18</span></li>
</ol>
結構寫好了,接下來寫CSS樣式部分了,在這里先重點介紹一個CSS屬性:
text-overflow: ellipsis;
text-overflow就是定義文字溢出的時候,該如何截斷文字,屬性值是ellipsis的時候就是當對象內文本溢出的時候顯示省略標記(…),該屬性支持IE6以上的版本IE7/8/9和除Firefox以外的現代標準瀏覽器:Chrome、Safari。Opera是個特例,但也有一個專門針對Opera的屬性:
-o-text-overflow: ellipsis;
好了,下面就是完整的CSS代碼
view sourceprint?
<style type="text/css">
#news-list {
list-style:none;
width:156px;  /*注意這個寬度*/
}
#news-list:after {
content:'';
display:block;
clear:both;
height:0px;
}
#news-list li {
clear:both;  /*清除li中的浮動*/
}
#news-list li a {
float:left;  /*標題向左浮動*/
color:#333;
text-decoration:none;
font-size:13px;
max-width:156px;  /*給標準瀏覽器一個最大寬度*/
height:24px;
!important;  /*強制文字不換行(標準瀏覽器)*/
white-space:normal;  /*溢出的時候文字換行,并配合上面的固定高度,對文字進行裁切*/
overflow:hidden;
text-overflow:ellipsis;  /*截斷文字,顯示省略號(...)*/
-o-text-overflow:ellipsis;  /*Opera的專用截斷文字的屬性*/
background:none;  /*解決IE6的莫名高度BUG,試試在IE6下去掉這個屬性*/
}
#news-list li a:hover {
color:#000;
text-decoration:underline;
}
#news-list li span {
float:left;  /*日期向左浮動*/
color:#666;
padding-left:10px;
margin-right:-99px;  /*讓標題和日期顯示在同一行*/
_position:relative;  /*針對IE6使用相對定位*/
}
</style>

轉載請標注:東東工作室——用CSS就能完美解決文字溢出的處理辦法

内蒙快3推荐一定牛