首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >解决Chrome不兼容li标签中的文本溢出自动隐藏的问题

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

作者头像
世纪访客
发布2018-08-02 15:48:22
2.1K0
发布2018-08-02 15:48:22
举报
文章被收录于专栏:西枫里博客西枫里博客
...
...

一般情况下对文章列表的调用,通常使用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定义行高问题。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-01-20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 解决方法一
  • 解决方法二
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档