本文介绍了h标签的额外字间距的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有 c>> c> c> ; h2> 标签,这将导致间距问题。
为了增加特异性,您可以使用 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标签的额外字间距的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!