【CSS】CSS 处理空白、换行、制表符

最新推荐文章于 2023-02-03 13:08:29 发布

芳月存心

最新推荐文章于 2023-02-03 13:08:29 发布

阅读量1.4k

点赞数

分类专栏：书籍摘要 css

本文链接：https://blog.csdn.net/z767327552/article/details/114644228

版权

css 同时被 2 个专栏收录

13 篇文章

订阅专栏

书籍摘要

6 篇文章

订阅专栏

本文介绍了在HTML中如何处理空白、换行和制表符以实现换行效果。通过使用`<pre>`标签和CSS的`white-space`属性，可以有效地保留和展示文本的原始格式。`<pre>`标签默认会显示所有空白符，而`white-space: pre`则能实现相同的效果，允许在CSS中更灵活地控制文本布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<span>&nbsp;ddd
ddd
ddd

</span>

在html文档中，有此节点，需要展示换行效果，该如何处理才有换行呢？

1. 使用 < pre > 标签

pre 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。(紧跟在 < pre > 开始标签后的换行符也会被省略)

pre标签默认样式：

pre {
    display: block;
    font-family: monospace;
    white-space: pre;  /**css 处理空白属性**/
    margin: 1em 0px;
}

在使用pre标签的时候，往往需要自设一下pre标签的样式。

2. 使用css属性 white-space

white-space 属性，它影响用户代理对文档源码中的空格、换行符和制表符的处理方式。

其中，pre值-保留标记中的空白，在此方面跟< pre >标签效用一致。

下面的表格总结了各种 white-space 值的行为：

	换行符	空格和制表符	文字换行	行尾空格
`normal`	合并	合并	换行	删除
`nowrap`	合并	合并	不换行	删除
`pre`	保留	保留	不换行	保留
`pre-wrap`	保留	保留	换行	挂起
`pre-line`	保留	合并	换行	删除
`break-spaces`	保留	保留	换行	换行