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

时间: 2018-08-03阅读: 5205标签: css

html中的空格的规则

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

<p> fly63   com </p>

显示效果为:

fly63 com

备注:浏览器的这种机制处理,同样适用于除了普通的空格键,还包括制表符(\t)和换行符(\r和\n),可以通过使用<br>标签显式表示换行。

 

HTML空格保留

这时候如果希望HTML中多个连续的空格在网页上能显示,在浏览器中表现出真实的自身空格缩进和换行效果。 我们知道一般有2种方式,使用<pre>标签,或者使用&nbsp;来代表空格。如下:

<pre> fly63 com </pre>

或者

<p>&nbsp;fly63 &nbsp;&nbsp; &nbsp;com&nbsp;</p>

Html中空格目前有这些:

&nbsp;&#160; 不断行的空白(1个字符宽度)
&ensp; &#8194;半个空白(1个字符宽度)
&emsp;&#8195;一个空白(2个字符宽度)
&thinsp; &#8201;窄空白(小于1个字符宽度)


css空格保留

1、css中当 white-space 属性取值为pre时,就按照<pre>标签的方式处理。浏览器会保留文本中的空格和换行,例如:

<p style="white-space:pre"> fly63  com <p>

 显示效果为:' fly63   com '


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

<p style="white-space: pre-line">
	fly63
	com
</p>

显示效果为:

'fly63

com'


3、CSS的 letter-spacing 属性用于设置文本中字符之间的间隔,例如:

<p style="letter-spacing:5px;">欢迎光临!</p>

显示效果为:' 欢   迎   光   临   !'


4、CSS的 word-spacing 属性用于设置文本中单词之间的间隔,例如: 

<p style="word-spacing:5px">Happy new year!</p>

显示效果为: Happy   new   year! 


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/972

整理一下CSS最容易躺枪的二十规则,大家能躺中几条?

满屏div之css最容易中枪的二十条规则,你中枪了吗?一、float:left/right 或者 position: absolute 后还写上 display:block?二、认为布局就是 Float,所有的地方都是 Float,全家都是 Float!

CSS三大特性:层叠 继承 优先级

如果一个属性通过两个相同选择器设置到同一个元素上,相同的属性就会出现冲突,那么这个时候一个属性就会将另一个属性层叠掉,采用的是就近原则

为什么 CSS 这么难?

我同 CSS 打交道已经有几年了,每当需要就会用到它。最近我想明白了一个问题,那就是为什么做好 CSS 样式如此之难。如果你一直都在 CSS 中苦苦挣扎,你要知道自己并不是一个人。本文就是要告诉你为什么 CSS 这么难

原来 CSS 这样写是会让 App 崩溃的

之前在自己的个人公众号中提到了一篇利用 CSS 的方式进行 XSS 攻击,当时有朋友跟我说,让我去获取那个网站的 cookie,再然后进入那个网站的后台去玩。然而,技术能力实在有限,搞不了这些东西

css底部固定的5种方法

本文主要介绍一个Footer元素如何粘住底部,使其无论内容多或者少,Footer元素始终紧靠在浏览器的底部。我们知道,当内容足够多可以撑开底部到达浏览器的底部,如果内容不够多,不足以撑开元素到达浏览器的底部时

CSS3 clip-path 用法介绍

clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径,或者作为一个形状例如circle().。clip-path属性代替了现在已经弃用的剪切 clip属性。

前端利用css一行代码实现头像与国旗的融合

今天是国庆节,大家都在为庆祝祖国的生日而着急。每年这个时候,微信朋友圈都会流行用旗子装饰头像,那么,如何通过将国旗图片与我们的头像结合来快速得到想要的头像,如何简单的用CSS实现呢?

css禁止选中文本_兼容实现禁用选择功能

有时候,我们需要使页面内容不可选择。首先想到的是一个css属性:user-select。user-select有两个值:none:用户不能选择文本 ,text:用户可以选择文本

如何写出一套可维护的CSS库?

如何写出一套可维护的CSS库?不妨谈谈CSS的设计模式/架构吧。接下来将为你讲述三个主流的CSS设计思想和一个最近通用的CSS设计思想:OOCSS、SMACSS、BEMCSS、METACSS。

能用HTML/CSS解决的问题就不要使用JS

为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单。简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!