2021-07-14 white-space、word-wrap和word-break区别;letter-spacing和word-spacing区别

此3个是在CSS中最常见的文本换行相关属性。
1、white-space:
作用:
作用于空格和回车,用于控制空格是否进行合并,回车是否进行换行,如果句子过长是否在空格处换行。
常用参数:
normal:多个连续的空格会被合并为一个,回车会被忽略,同时句子如果太长,会在空白处折行。
nowrap:强制在同一行显示文本,合并多余的空白,除非遇到br才换行。
运用场景:
主要用于固定宽度的标题,水平方向的文本过长加省略号的操作。
一行超出:
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行超出:
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
注意:
如用使用了white-space为nowrap,设置其它强行折行的word-break将不生效,需要修改white-space为normal。

2、word-wrap:
作用:
主要用于单词上,控制水平方向上的超长单词是否折行。
常用参数:
normal:单词超长也不可折行,会产生溢出。
break-word:单词超长会折行

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

4、letter-spacing:
长度单位,设置字符间的间距,对于英文而言单个字母就是一个字符,对于中文而言单个文字就是一个字符。

5、word-spacing:
长度单位,设置单词间的间距,如何区别是不是为一个单词呢,用空格隔开的为一个单词,对于英文而言就是字面意思,对于中文而言,因为中文没有空格的习惯,所以如果没有打空格,这个属性不起作用,打了空格才起作用,会使空格变得更大。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容