CSS属性"text-indent“不适用于html span元素

Question

例如：

HTML代码

<div>
     <h1><span class="title-icon">icon</span> Hello India!</h1>
</div>

CSS代码

h1{
}

h1 span{
    background: url("../images/icon.png")
    text-indent: -9999px;
    width:24px;
    height:24px;
    margin-right:1em;
}

Answer 1

text-indent不能在inline元素上工作。<span>默认为inline。您需要更改它，使其作为内联块工作：

display:inline-block;

Answer 2

尝试将font-size设置为zero

h1 span {
    background: url("../images/icon.png")
    font-size: 0;
    width: 24px;
    height: 24px;
    margin-right: 1em;
}

Answer 3

我的问题是文本对齐。如果您修改了元素的对齐模式或将其向左换行的父元素，则必须为text-indent指定负索引。否则，您必须提供一个正值。

.case1{text-indent:-999px;text-align:left;overflow:hidden;display:block}

否则

.case2{text-indent:999px;text-align:right;overflow:hidden;display:block}