关于文字特性的一些设置

今天来说一下关于css中文字的一些新特性，其中包含了字间距、词间距、 首行缩进、
字母大小写、空白的处理、强制换行、自动换行、inlin-block的对齐方式的一些使用
1.direction

/*控制内联块的对齐方式*/
.test{
direction: rtl;//从右到左
direction: rtl;//从左到右
}
.test span{
display: inline-block;
}
<div class="test">
<span>一蓄意，危乎高哉！</span>
<span>derection使用</span>
</div>

2.letter-spacing字间距，只对英文字母有效果

/*控制字间距*/
.letter-spacing{
letter-spacing: 10px;
}
<div class="letter-spacing">
letterspaing 只对英文有效
</div>

3.word-spacing,控制词间距 只对英文有效

.word-spacing{
word-spacing: 100px;
}
<div class="word-spacing">
word-spacing word-spacing word-spacing word-spacing词间距，针对英文</div>

4.text-indent首行缩进两个字符

/*首行缩进两个字符*/
.text-index{
text-indent: 2em;
}
<div class="text-indent">
一蓄意，危乎高哉！一蓄意，危乎高哉！一蓄意，危乎高哉！    一蓄意，危乎高哉！一蓄意，危乎高哉！一蓄意，危乎高哉！    一蓄意，危乎高哉！一蓄意，危乎高哉！一蓄意，危乎高哉！    一蓄意，危乎高哉！一蓄意，危乎高哉！一蓄意，危乎高哉！    一蓄意，危乎高哉！一蓄意，危乎高哉！一蓄意，危乎高哉！    一蓄意，危乎高哉！一蓄意，危乎高哉！一蓄意，危乎高哉！
</div>

5.text-transform控制字母大小写

.text-transform{
text-transform: uppercase;//字母大写
text-transform: capitalize;//首字母大写
}
<div class="text-transform">
text-transform字母大小写
</div>

6.write-space

.write-space{
/*white-space: nowrap;//强制不换行*/
/*white-space: pre;//完全保留空格一类的，并且不会自动换行*/
/*white-space: pre-line;//去掉多余空白*/
white-space: pre-wrap;//保留空白，当空间不够时，自动换行
}
<div class="write-space">
write-space <br>
write          -space
write-space
</div>

7.text-overflow

.text-overflow{
text-overflow: ellipsis;//多出的部分用...代替
}
<div class="text-overflow">
word-spacing word-spacing word-spacing word-spacing 配合white-                                      spacing overflow使用
</div>

如果有什么错的地方，欢迎指正

4000
邮箱：eternalshallow@163.com