首页 前端知识 CSS 设置空格原样显示 white-space:pre-wrap;

CSS 设置空格原样显示 white-space:pre-wrap;

2024-05-29 10:05:06 前端知识 前端哥 583 227 我要收藏

CSS 设置空格原样显示

问题描述

html 渲染内容时,对于 空格、回车、Tab 键的 默认处理方式是 :

无论存在多少个连续的空格,都只会保留一个

结论
由于以上的特性,导致了我们无法直接渲染出原格式的文本。

pre 标签

了解一下

<pre> 标签 可以在一定程度上弥补上述问题,它的作用是,将文本原样输出。

听上去好像 <pre> 标签 能够解决 空格渲染的问题。
对,没错,它的确可以保留所有的原格式。

但是,正因为它是保留所有的原格式,就导致了,你的文本是啥样就会展示成啥样。
例如 :它不会自动换行。
这样的话,用起来也不是特别的方便。

使用案例

下面展示一下<pre>标签的使用:

<div style="border:1px solid red;width:500px">
    <pre>
    钢铁侠,               本名托尼·史塔克,是美国漫威漫画旗下的超级英雄。
    他初次登场于1963年的《悬疑故事》第39期,由斯坦·李、赖瑞·理柏、唐·赫克和杰克·科比联合创造。
    托尼出生于1970年5月29日,是斯塔克工业(STARK INDUSTRIES)的CEO。
    </pre>
</div>

效果展示 : 空格原样展示;不会自动换行。

在这里插入图片描述

white-space 属性(*)

作用说明

white-space:pre-wrap;

可以实现 :<br>
1.空格、回车、Tab 原样输出;
2.自动换行;

使用案例

下面展示一下 white-sapce:pre-wrap;的使用

<div style="border:1px solid green;width:500px;">
    
   <pre style="white-space:pre-wrap;"> 
   钢铁侠,              本名托尼·史塔克,是美国漫威漫画旗下的超级英雄。他初次登场于1963年的《悬疑故事》第39期,由斯坦·李、赖瑞·理柏、唐·赫克和杰克·科比联合创造。托尼出生于1970年5月29日,是斯塔克工业(STARK INDUSTRIES)的CEO。
   </pre>
</div>

效果展示 : 空格原样展示;自动换行。

在这里插入图片描述

以上就是 CSS 中保留空格样式输出的 white-space属性的使用。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9891.html
评论
会员中心 联系我 留言建议 回顶部
复制成功!