6.4 文本换行

  • word-wrap / overflow-wrap 设置内容超过指定容器的边界时是否断行。

    取值:

    normal: 允许内容顶开或溢出指定的容器边界。 (默认值)

    break-word: 内容将在边界内换行,如果需要,单词内部允许断行。它要求一个没有断行破发点的词必须保持为一个整体单位,如果当前行无法放下需要被打断的单词,为了保持完整性,会将整个单词放到下一行进行展示。这与word-break的break-word值效果相同

    注意

    IE5.5率先实现了word-wrap,后期被w3c采纳成标准属性;

    CSS3中将word-wrap改名为overflow-wrap

  • word-break 文本的字内换行行为。

    取值:

    normal: 默认的换行规则。依据各自语言的规则,允许在字间发生换行。 (默认值)

    keep-all: 对于 CJK(中文,韩文,日文)文本不允许在字符内发生换行。Non-CJK 文本表现同normal

    break-all: 对于 Non-CJK 文本允许在任意字符内发生换行。该值适合包含一些非亚洲文本的亚洲文本,比如使连续的英文字符断行。

    break-word: 与break-all 相同,不同的地方在于它要求一个没有断行破发点的词必须保持为一个整体单位。这与 word-wrap 的 break-word 值效果相同

  • white-space 设置元素是否保留文本间的空格、换行;指定文本超过边界时是否换行。

    取值:

    normal: 默认处理方式。会将序列的空格合并为一个,内部是否换行由换行规则决定。 (默认值)

    pre: 原封不动的保留你输入时的状态,空格、换行都会保留,并且当文字超出边界时不换行。等同 pre 元素效果

    nowrap: 与normal值一致,不同的是会强制所有文本在同一行内显示。

    pre-wrap: 与pre值一致,不同的是文字超出边界时将自动换行。

    pre-line: 与normal值一致,但是会保留文本输入时的换行。

    注意: 控制文本断行,该属性是最常用的

results matching ""

    No results matching ""