关于文字特性的一些设置

今天来说一下关于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>

如果有什么错的地方，欢迎指正
邮箱：eternalshallow@163.com