關於文字特性的一些設定

eternalshallow發表於2017-12-14

今天來說一下關於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

相關文章