css如何保留空格,HTML/CSS中的空格处理

html中的空格的规则

在html中内容中的多个空格一般会被视为一个，连续的多个空格符被自动合并了。同时内容前后的空格也会被清除，如下：

fly63 com

显示效果为：

fly63 com

备注：浏览器的这种机制处理，同样适用于除了普通的空格键，还包括制表符()和换行符(和

)，可以通过使用
标签显式表示换行。

html空格保留

这时候如果希望html中多个连续的空格在网页上能显示，在浏览器中表现出真实的自身空格缩进和换行效果。我们知道一般有2种方式，使用

标签，或者使用 来代表空格。如下：

 fly63 com

或者

fly63 com

html中空格目前有这些：

不断行的空白(1个字符宽度)

半个空白(1个字符宽度)

一个空白(2个字符宽度)

窄空白(小于1个字符宽度)

css空格保留

1、css中当 white-space 属性取值为pre时，就按照

标签的方式处理。浏览器会保留文本中的空格和换行,例如：

fly63 com

显示效果为：‘ fly63 com ‘

2、css的white-space属性为pre-line时，意为保留换行符。除了换行符会原样输出，其他都与white-space:normal规则一致。

fly63

com

pixabayhttps://www.wode007.com/sites/73237.html wallhavenhttps://www.wode007.com/sites/73236.html

显示效果为：

‘fly63

com‘

3、css的 letter-spacing 属性用于设置文本中字符之间的间隔，例如：

欢迎光临！

显示效果为：‘ 欢迎光临！‘

4、css的 word-spacing 属性用于设置文本中单词之间的间隔，例如：

Happy new year!

显示效果为： Happy new year!

HTML/CSS中的空格处理_如何保留页面中的空格

css如何保留空格,HTML/CSS中的空格处理_如何保留页面中的空格相关推荐

.Net 6.0中的新增特性_.Net 6.0中的新增功能
.Net 6.0中的新增特性_.Net 6.0中的新增功能一..Net 6 介绍 .NET 6 作为 LTS 长期支持版本,.NET 6 将会获得 3 年的技术支持. .NET 6 是首个原生支持 ...
【Flutter 问题系列第 22 篇】在 Flutter 中如何截取屏幕并显示到页面中，以及如何将截图保存到相册
这是[Flutter 问题系列第 22 篇],如果觉得有用的话,欢迎关注专栏. 关于在 Flutter 中如何截取屏幕,以及如何将截图保存到相册的文章少之又少,即使有,也是错误一大片,有的甚至运行后都 ...
jsp中如何使1和0再页面中显示为男和女
jsp中如何使1和0再页面中显示为男和女具体代码如下未转变前转变后的代码与显示这样很简单就完成了所需要的需求,后续如果有不懂的欢迎前来切磋
java中注解的解析_全面解析Java中的注解与注释
注解一.什么是 Annotation? (注解 or 注释)Annotation, 准确的翻译应该是 -- 注解. 和注释的作用完全不一样. Annotation 是JDK5.0及以后版本引入的一个特 ...
html调用rpst 源码_在web页面中播放rtsp直播数据流方法
WEB播放RTSP直播数据流方法附录一些RTSP测试地址: 1.rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov 一段动画片 2.rtsp: ...
react中使用构建缓存_通过在React中构建Tic Tac Toe来学习ReasonML
react中使用构建缓存 3. 7. 2018: UPDATED to ReasonReact v0.4.2 3. 7. 2018:更新为ReasonReact v0.4.2 You may have ...
vue 中的el表达式_解释el页面数据表达式
java web开发人员经常使用标签 struts标签库国际化配置配置国际化 1.国际化配置在struts自带的app中的struts-config.xml中的<message-resou ...
python 中缩进的作用_缩进在Python中的作用有哪些？Python缩进案例分享
缩进通常是指在文档中缩进单词,空格或行以遵循文档的样式规则,或者可以用来解释编写文档或代码时应使用的距离或应使用的空格.不过缩进在Python中的作用有哪些?在Python中缩进是最独特的功能之一,可 ...
html中看到php代码_如何在HTML中嵌入PHP代码
如何在HTML中嵌入PHP代码对于一个有经验的 PHP Web 开发者,在HTML中嵌入PHP代码是一件非常容易的事情.但是对于刚开始接触 PHP 编程语言的新手这就是一个问题.下面是小编为大家带来 ...
java中的最终变量_在lambda表达式中使用的变量应该是最终变量或有效的最终变量。...
A final变量意味着它只能被实例化一次.在Java中,您不能在lambda和匿名内部类中使用非最终变量. 您可以使用旧的for-each循环重构代码:private TimeZone extrac ...

css如何保留空格,HTML/CSS中的空格处理_如何保留页面中的空格

css如何保留空格,HTML/CSS中的空格处理_如何保留页面中的空格相关推荐

最新文章

热门文章