CSS低频但实用知识(持续更新)

62 阅读1分钟

大段文本(如用户协议)保留格式

背景:开发中经常碰到大段用户协议,需要保留缩进、换行等格式。

方式一:末尾用<br/>换行。缺点:如果文本量大,人工加br符费时。

方式二:用pre标签。缺点:遇到容器不换行,但可以用white-space: pre-wrap来解决。如下图:

不加white-space: pre-wrap,不会自动换行: 截屏2024-01-04 09.42.27.png

white-space: pre-wrap后,遇容器边界自动换行: 截屏2024-01-04 09.41.13.png

white-space扩展知识:

  • pre:浏览器保留空白,同<pre>标签
  • nowrap: 文本不换行,通常用于单行标题等样式
  • pre-wrap: 保留空白符序列,但正常地进行换行,如上文示例
  • pre-line: 合并空白序列,但保留空白符,应用较少