html - 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

我的问题是文本对齐。如果您修改元素的对齐模式或将其包裹到左侧的父元素，则必须为文本缩进提供负索引。否则你必须给出一个正值。

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

否则

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