h标签的额外字间距 [英] Extra Word spacing of h tag
问题描述
我有 h2
标签,并且有:之前
。
HTML
< h2 class =glyphicon arrow-heading text-white margin-zerostyle =z-index:1;>
这是h2标签,它有字间距问题
< / h2>
CSS
.arrow-heading:before {
content:\e072;
color:#9B0D25;
float:left;
}
。glyphicon {
position:relative;
top:1px;
display:inline-block;
font-family:'Glyphicons Halflings';
font-style:normal;
font-weight:400;
line-height:1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
.text-white {
color:#FFF;
}
.margin-zero {
margin:0em;
}
h2 {
font-size:1.5vw;
}
但是我得到了额外的空格,如下所示,不带 text -align:justify;
我想要没有 EDIT
使用 text-align:justify;
c> c> ; h2>
标签,这将导致间距问题。 为了增加特异性,您可以使用< i> / code>标签作为
< h2>
的第一个子标签,另一个标签是(如OP)移动 font-family c>
I have h2
tag and there is content :before
.
HTML
<h2 class="glyphicon arrow-heading text-white margin-zero" style="z-index: 1;">
This is h2 tag and it has word spacing problem
</h2>
CSS
.arrow-heading:before {
content: "\e072";
color: #9B0D25;
float: left;
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.text-white {
color: #FFF;
}
.margin-zero {
margin: 0em;
}
h2 {
font-size: 1.5vw;
}
But I get extra spacing as shown below without text-align: justify;
I want no extra spacing.
EDIT
With text-align: justify;
解决方案 I answered in the comments, but the Glyphicon Haflings
font is being applied to the entire <h2>
tag, and this will cause the spacing problem. The font should only be applied to the element that is specifically containing the Glyphicon.
To increase specificity, you could use an <i>
tag as the first child of <h2>
, and another would be (as OP did) moving the font-family
to the .arrow-heading:before
selector in your CSS.
这篇关于h标签的额外字间距的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!