文字换行

CSS 中,文字换行控制主要通过 word-wrap, word-breakwhite-space 属性来实现。word-wrap 允许长单词或URL 自动换行,word-break 用于控制单词内部是否允许断行,white-space 则控制元素内的空白如何处理,包括换行。

  1. word-wrap 属性:
  • normal: 默认值,不换行,除非遇到预定义的断行符(如空格,标点等)。
  • break-word: 允许长单词或URL 在单词内部进行换行,以适应容器。
  1. word-break 属性:
  • normal: 使用浏览器默认的换行规则,一般在半角空格或连字符处换行。
  • break-all: 允许在单词内进行换行,不考虑英文单词的完整性。
  • keep-all: 只在半角空格或连字符处换行,对中文等CJK字符无效,除非有空格,否则不会换行。
  1. white-space 属性:
  • normal: 浏览器默认的空白处理规则,会合并多余空白,并根据需要换行。
  • nowrap: 不换行,除非遇到 <br> 标签或显式换行符。
  • pre: 保留文本中的空白符,不进行合并,且不换行,除非遇到 <br> 标签。
  • pre-wrap: 保留空白符,但会根据需要换行。
  • pre-line: 合并空白符,但保留换行符,并根据需要换行。
Licensed under CC BY-NC-SA 4.0
Built with Hugo
Theme Stack designed by Jimmy