css换行相关

146 阅读1分钟

CSS 属性

white-space

描述:规定段落中的文本换不换行,以及文本的空格、制表符、换行符规则,设置不换行时优先级高于:word-wrap、word-break。

换行值

  • normal:浏览器默认行为,合并换行符、空格、制表符,删除行尾空格;
  • pre-wrap:保留换行符、空格、制表符,行尾空格保留但是不显示;
  • pre-line:保留换行符,合并空格、制表符,删除行尾空格;
  • break-spaces:保留换行符、空格、制表符,行尾空格用作换行;

不换行值

  • nowrap:合并换行符、空格、制表符,删除行尾空格;
  • pre:保留换行符、空格、制表符、行尾空格;

word-break

描述:在合适的点换行,优先级高于word-wrap。

  • normal:使用浏览器默认的换行规则;
  • break-all:允许在单词内换行。
  • keep-all:只能在半角空格或连字符处换行;

word-wrap

描述:允许长的内容可以自动换行。

  • normal:只在允许的断字点换行(浏览器保持默认处理);
  • break-word:在长单词或 URL 地址内部进行换行;

overflow-wrap

描述:允许长的内容可以自动换行,是 word-wrap 新属性,通常一起使用做兼容。

  • normal:允许内容顶开或溢出指定的容器边界;
  • break-word:内容将在边界内换行。如果需要,单词内部允许断行;