• 用css就能完美解决文字溢出的处理办法-凯发登录入口

  • 专注网站建设 服务热线: 13061801310

当前位置:好东东网 > 近期动态 > 网站建设观点 > 正文

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

发布时间:2016-10-25 | 发布者:  | 浏览次数: 次
用css就能完美解决文字溢出的处理办法
经常会在项目中碰到文字溢出的情况,解决起来也比较麻烦,而最大的麻烦还是在浏览器的兼容问题上。至少到目前为止,我还没找到用css就能完美解决文字溢出的办法。前几天就再次碰到这个问题,之后一查,发现和迅雷的一个页面重构的面试题惊奇的相似,仔细一想,也没啥巧合不巧合的,只能说这种情况太常见了。
要求是这样的:一个新闻列表,新闻标题后紧跟着日期,新闻标题的宽度超过一定的宽度就要自动截断,但是日期必须显示完整。
花了点时间研究了下,最终的效果对于浏览器的兼容不是很理想,但我觉得也是很不错了。
查看演示
看到这个要求,基本上就知道html的结构该怎么写了,一个有序列表(ol li):

  1. 2010-09-18

  2. 2010-09-18

  3. 2010-09-18

  4. 2010-09-18

  5. 2010-09-18

  6. 2010-09-18

  7. 2010-09-18

  8. 2010-09-18

  9. 2010-09-18


结构写好了,接下来写css样式部分了,在这里先重点介绍一个css属性:
text-overflow: ellipsis;
text-overflow就是定义文字溢出的时候,该如何截断文字,属性值是ellipsis的时候就是当对象内文本溢出的时候显示省略标记(…),该属性支持ie6以上的版本ie7/8/9和除firefox以外的现代标准浏览器:chrome、safari。opera是个特例,但也有一个专门针对opera的属性:
-o-text-overflow: ellipsis;
好了,下面就是完整的css代码
view sourceprint?

转载请标注:东东工作室——用css就能完美解决文字溢出的处理办法