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
属性的使用。