網站資訊 news
您現在的位置:首頁 > 網站資訊 > 用CSS就能完美解決文字溢出的處理辦法
NEWS

新聞資訊

  • 【云風網絡】復工延期通知
    2020/02/09

      尊敬的客戶:由于新冠疫情原因!我公司復工延期,具體時間另行通知!期間只提供應急處理,帶來不便敬請諒解!

  • 2020寒假結束昆山市開學時間可能會推遲…
    2020/01/29

    蘇州關于加強新型冠狀病毒感染的肺炎疫情防控工作的通告(第3號) 2020-01-26 21:32 為維護公眾生命安全和身體健康,落實江蘇...

  • 簡單的html代碼 加粗 加亮 字型加大 變色的寫法
    2020/01/01

    字體加粗:<b>寫上你想寫的字</b> 字體加大: <big>寫上你想寫的字</big> 字體控制大?。?lt;h1>...

  • chrome瀏覽器如何將網頁保存為圖片
    2019/12/19

    1、ctrl+shift+i打開審查元素窗口 2、ctrl+shift+p,輸入full,回車 3、等待3秒鐘…

  • 老而不死的三種編程語言
    2019/11/07

    老而不死的三種編程語言 導讀: 在軟件世界中,鐵打的二進制,流水的語言。從計算機誕生至今,不知誕生了多少門編程語言。譯...

  • AI人工智能的10種常用算法
    2019/09/25

    ML的常用算法有個常識性的認識,沒有代碼,沒有復雜的理論推導,就是圖解一下,知道這些算法是什么,它們是怎么應用的,例子...

  • 網站如何進行安全設置
    2019/08/28

    為了安全起見,建議先做好全站數據和文件的備份,以下教程是AB模板網的總結經驗,本人也是這樣設置,并且沒有任何問題) 1、...

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

發布時間:2017/04/13 網站資訊 瀏覽次數:725

昆山網站建設

用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;

white-space:nowrap !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>

云風網絡是集昆山網站制作,昆山網頁設計,昆山網站推廣于一體的昆山網絡公司,業務涵蓋:昆山手機網站制作,昆山網站設計,昆山網絡建設,昆山做網站,昆山網站建設,電話:13912673321

相關推薦
點擊這里給我發消息 技術咨詢
回到頂部
双色球在线自动选号