haizlin/fe-interview

[css] 第142天 word-wrap、word-break和white-space有什么区别？

haizhilin2013 opened this issue · 4 comments

haizhilin2013 commented

第142天 word-wrap、word-break和white-space有什么区别？

xxf1996 commented
  • word-wrap：现在改为overflow-wrap了；用于控制单词在超出其包裹元素时是否中断单词换行；
  • white-space：用于处理元素中的空白符号（包括空格，换行符，制表符，<br>元素，文字自然换行）；
  • word-break：用于控制单词在换行时如何断开；
EragonBubble commented

word-wrap 又叫overflow-wrap，控制单词如何被拆分换行的,normal | break-word
word-break 控制单词如何被拆分换行的,normal | break-all | keep-all
white-space 控制空白字符的显示的,normal | nowrap | pre | pre-wrap | pre-line

  • 👍1
mrzp2 commented

  1. word-wrap
    标明是否允许浏览器再单词内进行断句
    normal 只允许在断字点换行 默认值
    break-word 在长单词或这url地址内部进行换行

  2. word-break
    标明怎么样进行单词内的断句
    normal 默认值
    break-all 允许在单词内换行
    keep-all 只能在半角空格或字符串处换行

3.white-space
属性设置如何处理元素内的空白
normal 默认值
pre 空包会被浏览器保存
nowrap 文本不会换行，在同一行显示，知道遇到br标签为止
pre-wrap 保留空白序列，会正常的换行
pre-line 合并空白序列，会保留换行符
inherit 应该从父元素继承white-space属性的值

EmiyaYang commented

word-wrap: break-word与word-break: break-word这两者容易混淆.

前者在一行无法全部容纳下一个单词时会将其全部"推至"下一行. 若下一行也无法完全容纳时再进行截断.
后者在一行无法全部容纳下一个单词时则会直接进行截断.

语言定性可能还是有点抽象, 可配合实例食用: Emiya's Codepen

  • 👍2