专栏首页西枫里博客解决Chrome不兼容li标签中的文本溢出自动隐藏的问题

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SEO中不可忽视的h1到h6的应用

    那天在群里有位SEO大拿,于是我吵吵着让大佬帮我看下我的博客优化还能怎么搞,他回我说我的博客缺少h1标签。从这里拉开了话题。着重聊了些h1标签的内容,其实也都是...

    世纪访客
  • thinkPHP5模版页面volist循环offset不能使用变量

    有这样一个应用场景:当volist循环需要排除前面几个数据的时候,我们通常使用offset来操作。而假设前面要排除的数据是根据当前页面占位符来确定的,而需要排除...

    世纪访客
  • rand()随机的效率问题

    在平时开发过程中,数据量不超过1W条的,通常执行随机查询是通过对order进行rand操作的进行的。但是随着数据量的增加,rand严重制约了整站的访问速度。...

    世纪访客
  • 获取标签的那些事 之 动态集合

    HTML5学堂:今天的内容从一道题开始,很简单,但是,你可能会“跪”得很惨。之后我们自然要挖一挖这个坑喽~所有学过JavaScript的人都知道获取标签,但是真...

    HTML5学堂
  • JS事件冒泡及阻止

    当一个元素接收到事件的时候,会把他接收到的事件传给自己的父级,一直到window,当然其传播的是事件,绑定的执行函数并不会传播,如果父级没有绑定事件函数,就算传...

    WindrunnerMax
  • 前端part-1-基础标签

    少年包青菜
  • Spring Boot系列之-helloword入门

    一. What: Spring Boot是什么? 以1.4.3.RELEASE为例,官方介绍为:http://docs.spring.io/spring-boo...

    2Simple
  • JavaEE微框架之Spring Boot

    ##前言## Spring框架作为JavaEE框架领域的一款重要的开源框架,在企业应用开发中有着很重要的作用,同时Spring框架及其子框架很多,所以知识...

    SmileNicky
  • 从零开始学 Web 之 jQuery(七)事件冒泡,事件参数对象,链式编程原理

    事件冒泡:当一个元素触发某个事件的时候,会把这个事件传播到其父元素,一直到顶层元素。

    Daotin
  • iOS编程101:如何创建圆形头像和圆角图片

    IOS7的一个变化是相对于方形图像,更偏爱于使用圆形图像。在内置的应用中可以看到圆形图标或圆形图像,如联系人和电话应用。这篇短文中,我们将探讨CALayer类,...

    Jace

扫码关注云+社区

领取腾讯云代金券