您現在的位置: 网站首頁 / 網站建設 / 正文

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

作者: admin 发布: 2015-6-7 11:35:14 分类: 網站建設 閱讀: 次 查看評論

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

  來源:SEO搜尋引擎優化 - SEO自學網 轉載注明出處!

? 上一篇下一篇 ?   本文關鍵詞: CSS  

評論列表:

站長SEO學院
第一節:百度搜索引擎工作原理
第二節:建設對搜索引擎友好的站點
第三節:如何進行網站內容建設
第四節:整體優化、結構優化、網頁優化
第五節:移動搜索-明確移動搜索優化標准
百度SEO資料文檔
百度搜索引擎優化指南2.0
百度移動搜索優化指南2.0
網站分析白皮書(站長版)
移動站點該如何優化
建設對百度友好的站點
百度搜索引擎網頁質量白皮書
石榴算法-綠蘿算法-冰桶算法
新搜索時代下的優化策略
更多百度SEO資料文檔
站長推薦
DIV+CSS布局實例教程-Web標准
网站SEO優化常见问题汇总
SEO優化推广方案该如何写
SEO優化方案步骤
影響網站關鍵詞排名因素總結
影響谷歌搜索引擎排名的因素調查
手機移動端站點適配優化
最近發表