`

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

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

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

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


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
分享到:
评论

相关推荐

    span设置text-indent不起作用的原因及解决方法

    对span.t-i{text-indent:-999px;}后发现并没有起作用,这是因为text-indent只能给块级元素设置,解决方法就是display:inline-block,遇到问题的朋友可以尝试下

    tailwindcss-text-indent:Tailwind CSS的文本缩进实用程序

    pnpm install --save-dev tailwindcss-text-indent # Install using npm npm install --save-dev tailwindcss-text-indent # Install using yarn yarn add -D tailwindcss-text-indent 用法 // tailwind.config.js {...

    03_text-indent(了解).html

    03_text-indent(了解)

    IE6中a标签同时使用inline-block与text-indent时出现的BUG

    在本文中,我们将深入探讨一个特定的问题:在IE6中,当`&lt;a&gt;`标签同时使用`inline-block`和`text-indent`属性时出现的显示异常。 `inline-block`是一个CSS布局属性,它使元素表现得像内联元素,但同时允许设置宽度、...

    css overflow与text-indent:-999em 字体隐藏

    为解决这个问题,开发者可能会将`&lt;a&gt;`转换为块级元素,但这可能会导致额外的布局调整,如使用`float`属性。 这时,`overflow:hidden;`属性就可以派上用场。结合`line-height:0;`和`font-size:0;`,可以更有效地隐藏...

    前端开源库-min-indent

    在前端开发领域,开源库是开发者们不可或缺的资源,它们为快速构建高效、可维护的Web应用提供了便利。...如果你的项目中涉及到文本处理和代码格式化,那么"min-indent"将是一个值得考虑的解决方案。

    IE7部分标签(span、input )设置text-indent:-9999px后不在相应位置显示

    当text-indent设置为一个非常大的负值(例如-9999px)时,文本的首行会从可视区域内移出。这在某些设计中被用来隐藏元素中的文本,而不影响该元素在布局中的功能性。例如,在需要显示背景图片而不显示文字时,可以...

    CSS实现段落首行缩进两个字符不再使用空格

    CSS(Cascading Style Sheets)提供了一个优雅的解决方案——`text-indent`属性,专门用于实现文本的首行缩进。 `text-indent`属性允许开发者指定元素内的首行文本相对于该元素的左边界缩进的距离。在中文排版中,...

    Atom-nyan-indent,彩色压痕。为VictorHQC/Nyan做出贡献.zip

    在压缩包文件列表中的 "nyan-indent-master" 文件夹,可能包含了该插件的源代码、资源文件和安装指南。如果你对插件的工作原理或者想要自定义其行为感兴趣,可以深入研究这个文件夹内的内容。通常,你可以找到一个名...

    Atom-python-indent,用于Atom编辑器的PEP8缩进包。贡献给dspeckhals/python.zip

    压缩包中的"python-indent-master"文件夹很可能是该插件的源码仓库,通常包含了插件的全部源代码、测试文件、README文档等资源。开发者如果想要深入理解插件的工作原理或者对其进行改进,可以研究这些源码。 总的来...

    CSS教程:text-indent隐藏文字出现虚线框outline

    在本文中,我们将探讨一个特定的CSS问题,即如何使用`text-indent`属性来隐藏文字,并处理在Firefox浏览器中可能出现的虚线框(outline)问题。 首先,我们经常使用`text-indent`属性来隐藏文字,特别是当链接使用...

    让超链接文字隐藏掉css代码.docx

    3. **替代方案**:除了`text-indent`,还可以使用`display: none`或`visibility: hidden`来隐藏文字,但这两种方法会完全移除元素,可能导致超链接无法被鼠标点击。因此,`text-indent`在保持链接功能的同时隐藏文字...

    Atom-color-indent,使用颜色以非侵入方式显示不同的缩进级别。.zip

    Atom-color-indent插件的核心功能体现在以下几个方面: 1. **颜色编码**:不同级别的缩进会用不同颜色高亮显示,例如,一级缩进可能是蓝色,二级缩进可能是绿色,以此类推。这种颜色编码方式有助于一眼看出代码的...

    让超链接文字隐藏掉css代码.pdf

    `text-indent`属性是CSS中一个非常实用的文本布局工具,它主要用于设置文本块的第一行的缩进。默认情况下,这个属性通常用于调整段落的首行缩进,例如,将每个段落的第一行向右移动两个字符的距离。在中文环境中,这...

    vim-python-pep8-indent:vim更好的Python缩进样式

    vim-python-pep8-indent 这个小脚本修改了的缩进行为,以符合和我的审美偏好。 最重要的是: foobar(foo, bar)和: foobar( foo, bar)安装使用您喜欢的插件管理器/方法安装插件,以下是一些示例:病原请按照有关安装...

Global site tag (gtag.js) - Google Analytics