white-space和word-wrap和word-break所表示的换行和不换行的区别

懵懂的女人 提交于 2020-02-08 09:29:16

white-space和word-wrap和word-break所表示的换行和不换行的区别

一、前言

  使得文本换行有很多方式,

  1. <br/>标签元素,能够强制使得所在位置文本换行
  2. <p>元素,<div>设定宽度,都可以对文本内容实现自适应换行
  3. 对于长单词或者链接,默认不会断开换行,方式2就不能够在其这些文本内部进行换行了,
    这时就需要word-wrap : break-word ;或者word-break:break-all;实现强制断行

二、正文

1. 强制不换行

div{
    white-space:nowrap;
}
/*
white-space:normal 默认 
pre 换行和其他空白字符都将受到保护
nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象
*/

2. 控制文本换行

div{
   word-break: normal;
  word-break: break-all;
  word-break: keep-all;
}
/*
word-break: 
normal ; 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本
*/

复制代码

3. 强制单词内或链接内断行

复制代码

div{
  word-wrap: break-word;
}
/*
word-wrap 属性用来标明是否允许浏览器在长单词和链接内进行断句
normal: 只在允许的断字点换行(浏览器保持默认处理)
break-word:在长单词或URL地址内部进行换行
*/

复制代码

 

 详细介绍:

(一)white-space 属性设置如何处理元素内的空白 

  white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit; 

  • normal默认。空白会被浏览器忽略。 
  • pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。 
  • nowrap文本不会换行,文本会在在同一行上继续,直到遇到 br 标签为止。 
  • pre-wrap 保留空白符序列,但是正常地进行换行。 
  • pre-line 合并空白符序列,但是保留换行符。 
  • inherit 规定应该从父元素继承 white-space 属性的值。

 

(二)word-wrap 属性用来标明是否允许浏览器在单词内进行断句

    word-wrap: normal|break-word; 

  word-wrap 属性用来标明是否允许浏览器在单词内进行断句

  • normal: 只在允许的断字点换行(浏览器保持默认处理) 
  • break-word:在长单词或URL地址内部进行换行,
    /*内容将在边界内换行。如果需要,单词内部允许断行。*/


(三)word-break 属性用来标明怎么样进行单词内的断句

  word-break: normal|break-all|keep-all;

  • normal:使用浏览器默认的换行规则。 
  • break-all:允许在单词内换行 , 允许任意非CJK(Chinese/Japanese/Korean)文本间的单词断行。
  • keep-all:只能在半角空格或连字符处换行,
    不允许CJK(Chinese/Japanese/Korean)文本中的单词换行,只能在半角空格或连字符处换行。非CJK文本的行为实际上和normal一致。

 

三、结语

https://www.cnblogs.com/yingzi1028/p/6113066.html

word-break: break-all;、word-break: keep-all; 、word-wrap: break-word;和white-space:nowrap;都有什么作用

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!