text-indent无效的几个原因及解决方案

最新推荐文章于 2021-11-02 17:09:42 发布

iteye_19643

最新推荐文章于 2021-11-02 17:09:42 发布

阅读量4.3k

点赞数 6

分类专栏： PHP 文章标签： Chrome IE 浏览器 HTML

本文链接：https://blog.csdn.net/iteye_19643/article/details/82031455

版权

PHP 专栏收录该内容

46 篇文章

订阅专栏

本文详细解析了CSS中text-indent属性的使用方法及其常见问题。包括如何解决text-indent在不同浏览器下的兼容性问题，以及当该属性失效时可能的原因和对应的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

text-indent是用来字符缩进的。我们通常用在段落首字缩进、想用图片显示却要考虑SEO对文字的理解等。虽然好用，但有时它并不是这么的听话，会出现无效的情况。下面整理了一些text-inden失效的原因。

1.text-indent所在的元素是行内元素而非块级元素。比如用在span,a等行内元素上;

解决方案：
在行内元素加上display:block; [color=red] 或者把目标元素放入<div>等块级元素，然后把text-indent
样式应用到<div>等块级元素。[/color]

2.text-indent所在的元素未使用overflow属性;
解决方案：
在元素加上overflow:hidden;

3.text-indent设置的值超出浏览器默认的最大或最小值，例如：text-indent:999999em在谷歌(Chrome)浏览器下无效;

解决方案：
有前辈说Chrome0.4.154.22版本下对text-indent支持的缩进极限值是：-134217723px;超出这个数在Chrome下则text-indent属性无效，FF下也存在同样的问题，不过极限数值是多少没去研究了，ie下似乎没有极限或极限值范围大一些。所以不能随意按住999999不放啊。

来源：颤哥的博客
地址：http://www.kulera.cn/post/text-indent.html