一、基础概念
word-spacing是CSS属性中的一个,它用于控制字与字之间的间距,可用于调整行内元素的间距。属性值可以为正数、负数、0或者normal。normal是浏览器默认值,可视为0。word-spacing并不影响单词内部的字母间距。
二、应用场景
1、排版布局领域。
word-spacing可以作为CSS排版布局领域中的一个重要工具应用于文章、段落等文字块元素上,以实现个性化的排版效果,让网页更具有艺术美感。
.article{ word-spacing: 2px; }
2、制作标题类元素。
word-spacing可以在标题和文字中产生一种微妙的视觉分层效果,对于页面视觉感受的提升有很好的作用。
h1{ word-spacing: 5px; }
3、文本对齐
word-spacing可以协助实现单个文本块的对齐方式,辅助完成语义化表述,把单个文本块里各个单词调整到合适的位置上。
.title{ text-align: justify; word-spacing: 10px; }
三、与其他属性的配合使用
1、与letter-spacing一起使用。
letter-spacing用于调整文字内部字母的间距,word-spacing用于调整字与字之间的间距。两者可以作为一对有机搭配,同时用于控制排版效果,起到更丰富多彩的呈现。
h2{ letter-spacing: 2px; word-spacing: 4px; }
2、与text-indent一起使用。
text-indent用于控制文本的缩进效果,可以事先设定好相应的值。当有word-spacing作用于文本时,需要注意调整text-indent,否则会影响排版效果。
.article{ text-indent: 2em; word-spacing: 2px; }
四、兼容性问题
1、IE6-IE7
在IE6和IE7浏览器中,word-spacing在一些情况下会失效,原因是其对汉字和数字的处理方式与其他浏览器有所不同,如需兼容低版本IE需加入额外的Hack代码。
.article{ word-spacing: 2px; *word-spacing: 0; /* IE6、IE7兼容 */ }
2、Firefox
在Firefox浏览器中,word-spacing属性会受到font-variant属性的影响,如果不希望产生影响,需要加入-word-wrap: break-word;的Hack代码。
.article{ word-spacing: 2px; -moz-font-feature-settings: normal; -ms-word-break: break-all; word-break: break-all; word-wrap: break-word; }
五、总结
word-spacing属性虽然是CSS中较为基础的属性之一,但其在实际的设计中却可以产生丰富多彩的效果,发挥着不可或缺的作用。因此,在设计中应该认真理解其概念、应用场景,并且在处理兼容性问题时也要做到心中有数。