关于文字特性的一些设置

来源:互联网 发布:霍尼韦尔待遇 知乎 编辑:程序博客网 时间:2024/05/22 10:33

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

0 0