|  RSS订阅  |  加入收藏

解决Chrome不兼容li标签中的文本溢出自动隐藏的问题

li标签中添加text-overflow: ellipsis;在Chrome中不能实现文本溢出自动隐藏。通过对li标签做块状元素处理后,li的list-style属性又无法生效。
摘要

一般情况下对文章列表的调用,通常使用ul循环li标签。受页面模块宽度的的限制,一般需要对li进行文本内容溢出隐藏处理,实现更加合理的排版。经过测试在li标签中使用text-overflow: ellipsis; white-space: nowrap; overflow: hidden;组合属性后,多数浏览器可以正常渲染。仅仅在Chrome下面无效。

尝试通过对li追加display:inline-block;或者display:block;变成块级元素后,li标签的list-sytle属性又失效了,成了一种顾此失彼的状态。

解决方法一

通过对li转成块级元素后,原list-style属性通过html页面插入圆点图标或者圆点字符来实现。另或通过输出行号12345这种自定义样式来达到目的。

解决方法二

雅兮网同学给了一个曲线救国的办法。通过对li标签内的a标签追加display:inline-block;属性。并设定一个宽度width或者最小宽度min-width,将组合属性text-overflow: ellipsis; white-space: nowrap; overflow: hidden;放入a标签。从而实现文本溢出自动隐藏。Chrome下还需要补充vertical-align: top;或者vertical-align: middle;来达到li标签和a标签在同一行内问题。根据现实效果需要,还可能需要对li定义行高问题。


如文章有用,给个赞助吧
  CSS    Chrome    
转载请注明出处,未经许可禁止商用!
发表评论
*依据《网络安全法》规定,您需实名认证后才能评论!

西枫里人
@龙笑天:我是说我自己呢,你网站上折腾很6的,不像我啥都不会,前端写不好,后端也垃圾,运维也不懂

龙笑天
@西枫里人:不要说透了啊~~~~~

西枫里人
@龙笑天:主题写不了,不光是前端短板,还有好多短板。^_^

龙笑天
迟迟没写主题 就是前端短板~~

西枫里人
@银色乐航:我的前端也不好。都是些皮毛。不过您那个网站的前端很漂亮啊。

银色乐航
前端开发是我心中永远的痛