经典案例
  • 厦门网站优化案例:年代文化传播公司
  • 厦门网站优化案例:117企业联盟
  • 厦门网站优化案例:爱家环保科技

用CSS就能完美解决文字溢出的处理办法

发布于:2018-03-26 10:02来源:www.sseoo.cn 作者:厦门SEO 点击:95次
用CSS就能完美解决文字溢出的处理办法经常会在项目中碰到文字溢出的情况,解决起来也比较麻烦,而最大的麻烦还是在浏览器的兼容问题上。至少到目前为止,我还没找到用CSS就能完美解决文字溢出的办法。前几天

用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使用相对定位*/

tag标签:
------分隔线----------------------------
------分隔线----------------------------