成都列举网 > 教育培训 > 电脑/网络 > CSS中文本换行属性
成都
[切换城市]

CSS中文本换行属性

更新时间:2018-01-16 14:47:03 浏览次数:75次
区域: 成都 > 双流 >
类别:网站前端开发培训
地址:成都市高新区府城大道西段399号天府新谷1号楼6F
今天我们来系统的学习一下CSS中文本换行属性的用法,主要是针对前期学习属性时,同学们对相关属性理解不透,所以今天源码时代H5前端培训讲师这次把相关属性抽出来,给大家科普一下!系统的总结一下相关属性之间的区别。
首先,我们在CSS中常见的文本换行相关属性有以下三个:
white-space,word-wrap,word-break
那么我们先来看一下这几个属性分别表达的意思吧:
1. white-space
作用:
作用于空格和回车,用于控制空格是否进行合并,回车是否进行换行,如果句子过长是否在空格处换行
常用参数说明:
1. normal:多个连续的空格会被合并为一个,回车会被忽略,同时句子如果太长,会在空白处折行
2. Nowrap:强制在同一行显示文本,合并多余的空白,除非遇到br才换行
运用场景:
主要用于固定宽度的标题,水平方向的文本过长加省略号的操作

注意:
如用使用了white-space为nowrap,设置其它强行折行的word-break将不生效,需要修改white-space为normal.
2. word-space
作用:
主要用于单词上,控制水平方向上的超长单词是否折行
常用参数说明:
Normal:单词超长也不可折行,会产生溢出
Break-word:单词超长会折行

3. word-break
作用:
防止页面中出现连续无意义的长字符打破布局
常用参数说明:
normal:如果是中文则到边界处的汉字换行,如果是英文整个词换行
注意:
如果出现英文字符长度超过边界,则后面的部分将撑开边框,如果边框为固定属性,则后面部分将无法显示
break-all:强行换行,将截断英文单词
keep-all:不允许字断开

以上内容做为使用时的理论前提,后期在使用中希望小伙伴们多加注意些!
本文章由源码时代H5前端学科讲师原创!
转载须注明出处(http://www.its***)!感谢大家的配合!
成都电脑/网络相关信息
java初学者应该怎么学
武侯-武侯周边
2022-12-09
2022-12-08
cisp证书含金量如何
武侯-武侯周边
2022-12-07
2022-12-07
数据库必看书籍有哪些
武侯-武侯周边
2022-12-06
真正的0基础如何学JAVA
武侯-武侯周边
2022-12-05
2022-12-01
注册时间:2016年07月05日
UID:306112
---------- 认证信息 ----------
手机已认证
查看用户主页