text-overflow属性失效 text-overflow在li下包含的a标签中无效

小Z 2019-08-25 06:04 主机之家测评 | 隐藏边栏 | 抢沙发 | 90 0

文章评分 0 次，平均分 0.0 ：

如题，text-overflow 属性在 li 下包含的 a 标签中失效，比如在下面代码中即使声明了 text-overflow 以及 white-space，仍然无法实现超出文字变为省略号：

html 代码：

        零五科技-自由的分享IT技术！零五科技-自由的分享IT技术！零五科技-自由的分享IT技术！零五科技-自由的分享IT技术！零五科技-自由的分享IT技术！

css 代码：

  li{      overflow: hidden;      white-space: nowrap;      text-overflow:ellipsis;      width: 800px;  }

解决方案：

设置 a { display: inline-block; } 。

结合上例最终的 css 代码为：

  li{      overflow: hidden;      white-space: nowrap;      text-overflow:ellipsis;      width: 800px;  }  li a{      display:inline-block;  }

声明：1、本博客不从事任何主机及服务器租赁业务，不参与任何交易，也绝非中介。博客内容仅记录博主个人感兴趣的服务器测评结果及一些服务器相关的优惠活动，信息均摘自网络或来自服务商主动提供；所以对本博客提及的内容不作直接、间接、法定、约定的保证，博客内容也不具备任何参考价值及引导作用，访问者需自行甄别。2、访问本博客请务必遵守有关互联网的相关法律、规定与规则；不能利用本博客所提及的内容从事任何违法、违规操作；否则造成的一切后果由访问者自行承担。3、未成年人及不能独立承担法律责任的个人及群体请勿访问本博客。4、一旦您访问本博客，即表示您已经知晓并接受了以上声明通告。