我是靠谱客的博主 纯真绿茶,这篇文章主要介绍设置white-space可使文本保留换行格式,现在分享给大家,希望可以做个参考。

在css中white-space属性用来控制容器的文本中带有空白符、制表符、换行符等的显示,取值有:

normal:默认,忽略文本中所有的空白、换行符;只有文本存在
或文本达到框的约束时,文本才会换行
nowrap:和normal类似,忽略文本中所有的空白、换行符;遇到框的宽度约束时不会自动换行,文本只有在有 br 时才会换行
pre:保留文本中的空白、换行符;遇到框的宽度约束时不会自动换行,文本存在
或文本中有换行符时,文本才会换行
pre-wrap:和pre类似,保留文本中的空白、换行符;文本存在
或文本中有换行符时,或者遇到框的宽度约束时,文本都才会换行
pre-line:会略文本中的空白符;文本存在
或文本中有换行符时,或者遇到框的宽度约束时,文本都才会换行

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ width: 300px; background-color: orange; margin: 0 auto; } .block{ white-space: pre-line; } </style> </head> <body> <div class="block"> <div>我是第一行 我是第二行 我是第三行 </div> </div> </body> </html>

pre与pre-line的区别是pre还会保留空格符。
之前准备使用n换行,然后在前台使用n替换成
来达到换行的目的,没想到一行css就能实现
(white-space:pre/pre-line/pre-wrap也能识别n)

最后

以上就是纯真绿茶最近收集整理的关于设置white-space可使文本保留换行格式的全部内容,更多相关设置white-space可使文本保留换行格式内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(85)

评论列表共有 0 条评论

立即
投稿
返回
顶部