大段文本(如用户协议)保留格式
背景:开发中经常碰到大段用户协议,需要保留缩进、换行等格式。
方式一:末尾用<br/>换行。缺点:如果文本量大,人工加br符费时。
方式二:用pre标签。缺点:遇到容器不换行,但可以用white-space: pre-wrap来解决。如下图:
不加white-space: pre-wrap,不会自动换行:
加white-space: pre-wrap后,遇容器边界自动换行:
white-space扩展知识:
- pre:浏览器保留空白,同
<pre>标签 - nowrap: 文本不换行,通常用于单行标题等样式
- pre-wrap: 保留空白符序列,但正常地进行换行,如上文示例
- pre-line: 合并空白序列,但保留空白符,应用较少