CSS 设置空格原样显示 white-space:pre-wrap；
warning:
这篇文章距离上次修改已过436天，其中的内容可能已经有所变动。
white-space: pre-wrap; 是 CSS 的 white-space 属性的设置值，它用于控制元素内的空白字符的处理方式。
当你设置 white-space: pre-wrap; 时，其表示的是：
- 空白会被保留
- 文本会在适当的地方自动换行
- 如果容器的宽度不够，单词内部的空白可以在单词内部断行
这种设置对于显示源代码或者保证文本格式原样显示非常有用。
以下是一个简单的 HTML 和 CSS 示例，展示如何使用 white-space: pre-wrap; 来保留文本的格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>White Space Example</title>
<style>
.pre-wrap {
white-space: pre-wrap;
/* 设置容器宽度以模拟换行效果 */
width: 150px;
/* 设置边框和背景以便于观察效果 */
border: 1px solid #000;
padding: 10px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="pre-wrap">
这是一个保留格式的文本示例。
它将保留 多个空格和换行，
并且在容器宽度不足时会自动换行。
</div>
</body>
</html>在这个例子中，div 元素的内部文本会保留空格和换行，并且在达到容器的宽度限制时会自动换行。
评论已关闭