white-space

word-break, word-wrap 和 white space

定义

  • word-break
    语法:
    word-break: normal|break-all|keep-all;
    描述:
    值 | 描述
    – | ——————————–
    normal | 使用浏览器默认的换行规则
    break-all | 允许在单词内换行
    keep-all | 只能在半角空格或连字符出换行

  • word-wrap
    语法:
    word-wrap: normal|break-word;
    描述:
    值 | 描述
    – | ——————————————
    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-break and word-wrap

    1
    2
    3
    4
    5
    p {
    width: 200px;
    height: 100px;
    border: 1px solid #ccc;
    }
    1
    2
    3
    <p>
    This is a veryveryveryveryveryveryveryveryveryveryvery long word.
    </p>

    word-break and word-wrap

  • white-space

    1
    2
    3
    4
    5
    p {
    width: 200px;
    height: 100px;
    border: 1px solid #ccc;
    }
    1
    2
    3
    4
    5
    6
    <p>
    This is a veryveryveryveryveryveryveryveryveryveryvery


    long word.
    </p>

    word-break and word-wrap

小结

  • word-break,此属性可控制当一个单词在行尾放不下时,单词内部该如何摆放。break-all 表示单词不换行显示,放不下的部分会换行显示,keep-all 表示单词另换一行显示,如果还放不下不会继续换行而是会溢出。

  • word-wrap,此属性决定单词在行尾放不下时,是否应该换行。normal 单词太长的话换行显示,还是太长的话就溢出,break-word 单词太长的话换行显示,还是太长的话单词内部可以换行。

  • 以上两个属性基本都是针对英文单词,中文/日文/韩文(CJK)等语言不适用

  • white-space: nowrap 以及 overflow: hidden 搭配 text-overflow: ellipsis 可以实现文本省略效果(…)

参考

CSS单词换行and断词,你真的完全了解吗
CSS3 word-break 属性
CSS3 word-wrap 属性
CSS white-space 属性