国产午夜精品一区二区三区不-国产午夜精品一区二区三区不卡-国产午夜精品一区二区三区极品-国产午夜精品一区二区三区老-国产午夜精品一区二区三区漫-国产午夜精品一区二区三区嫩草

聊城網站制作公司,聊城網站建設,聊城網站優化,聊城網絡公司,聊城網站推廣,聊城網站運營,聊城網絡運營,聊城搜索引擎優化,聊城網頁設計,聊城網站制作
 
 
公司擁有五年的網站建設經驗,專業網站制作,推廣及網站優化,有大量優秀客戶案例
網站建設 | 設為首頁 | 加入收藏 | 聯系我們  
公告:熱烈慶祝聊城精英網絡2010版官方網站改版成功!
當前位置 :首頁 > 網頁知識  

網站制作過程中如何處理文字溢出的情況

http://m.zjgjyh.cn   2010-12-21 16:47:48 來源:聊城網站建設 作者:精英網絡   人氣:

經常會在網站制作過程式中碰到文字溢出的情況,解決起來也比較麻煩,而最大的麻煩還是在瀏覽器的兼容問題上。至少到目前為止,我還沒找到用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代碼

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

專業設計團隊
滿足您的各種設計要求
實力程序開發團隊
為您定制各種程序模塊
后臺管理高效安全
方便更新上傳網站資料
全球高速訪問
無盲區、定制異地備份
專業客服團隊
解決一切使用難題
贈送大容量空間郵箱
免費優化推廣
   
關于我們 | 工作機會 | 付款方式 | 網站制作 | 網頁制作 | 網頁設計 | 網絡公司 | 聯系我們 | 網站地圖
版權所有:聊城精英網絡科技有限公司 © 2005-2010 All Rights Reserved.
咨詢專線:0635-6950368 技術專線:15192175820 在線QQ:312817927 1485871644
地址:聊城市閘口科技市場 郵編:252000 蘇ICP備10112026號
主站蜘蛛池模板: 国产永久免费精品999 | 无码精品人妻一区二区三区入口 | 香港经典a毛片免费观看…伊人色 | 在线国产三级 | 久久久久久久久久中文字幕 | 无码视频在线免费观看 | 无码精品a∨在线观看短视频 | 免费看黄的片多多APP下载 | 亚洲精品无码午夜福利理论片 | 亚洲国产精品无码久久夜夜嗨av | 人妻无码中字按摩 | 日韩av无码精品一二三区 | 国产极品美女高潮抽搐免费网站 | 少妇高潮免费毛片 | 亚洲av午夜福利精品香蕉 | 青青草原精品国产亚洲AV | 中国无码人妻丰满熟妇啪啪软件 | 日本波多野结衣在线观看 | 欧美日韩午夜情爱在线视频观看 | 自拍视频在线观看视频精品 | 日韩区欧美| 成人未删减H韩漫画网站 | 一本大道中文无码视频在 | 北条麻妃一区二区三区av高清 | 国产精品久久久久无码AV葡京 | 亚欧乱色国产精品免费视频 | 99国产欧美久久久精品 | 久久精品国产亚洲av麻豆色欲 | 中文无码亚洲制服师生 | 亚洲男女av一区二区 | 日韩欧美一区二区三区中文精品 | 亚洲成人自拍网站在线观看 | 国产色情A片国语露对白 | 国产无遮挡又黄又爽在线观看 | 精品久久久久久中文字幕人妻最新 | 亚洲国产欧美日韩第一香蕉 | 强奷乱码中文字幕免费 | 无码人妻精一区二区三区 | 亚洲av综合色区无码一区偷 | 极品少妇粉嫩小泬啪啪AV | 国产成人一区二区三区视频免费 |