小编分享小编告诉你,如何用CSS解决文字溢出的处理办法。

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

经常会在项目中碰到文字溢出的情况,解决起来也比较麻烦,而最大的麻烦还是在浏览器的兼容问题上。至少到目前为止,我还没找到用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?

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/274327.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
创业小编创业小编管理团队
上一篇 2023年6月12日
下一篇 2023年6月12日

相关推荐

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息