关于文字特性的一些设置
来源:互联网 发布:霍尼韦尔待遇 知乎 编辑:程序博客网 时间: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
- 关于文字特性的一些设置
- 关于Scala的一些文字
- 关于python的一些特性
- vs 文本文字的一些设置
- 一些关于GDI+的文字(zz)
- 一些关于文字编码的资料
- 关于飞鸽传书(IpMsg)的一些文字
- 关于PS做文字的一些总结
- 关于文字垂直居中的设置
- 关于特性回收的一些想法
- [原创]关于NOTIFYICONDATA的一些新特性
- 关于NOTIFYICONDATA的一些新特性
- 关于ios6的一些新特性
- 关于MSP430中断的一些特性
- Java特性关于反射的一些技术
- 关于fork()函数特性的一些探究
- 关于NOTIFYICONDATA的一些新特性
- 关于iOS 9 的一些新特性
- 目标伪类选择器实现手风琴效果
- 待完成题目。
- Android Resource 提供资源(2)
- 解决html中input的placeholder的颜色,点击时消失,input点击时样式的问题
- Hadoop建设工具Ambari的安装部署及完整使用(三)——部署安装
- 关于文字特性的一些设置
- 对象~时间篇_日历的实现
- Activity启动流程
- 原生js实现发短信~chat
- seajs和requirejs技术指导文档
- 如何使用yum安装最新软件包
- webpack环境的配置
- 谨用java.ext.dirs系统属性!
- 数据库制作步骤