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