输出空格隔开换行_【前端干货】CSS 的空格处理

889591d73ccc511e8c706a2b49579448.png

一空格规则

HTML 代码的空格通常会被浏览器忽略。

67903c7272e34fec064144b6389e158b.png
<p>◡◡hello◡◡world◡◡</p>

上面是一行 HTML 代码,文字的前部、内部和后部各有两个空格。为了便于识别,这里使用半圆形符号◡表示空格。

浏览器的输出结果如下。

hello world

可以看到,文字的前部和后部的空格都会忽略,内部的连续空格只会算作一个。这就是浏览器处理空格的基本规则。

如果希望空格原样输出,可以使用<pre>标签。

<pre>◡◡hello◡◡world◡◡</pre>

另一种方法是,改用 HTML 实体&nbsp;表示空格。

<p>&nbsp;&nbsp;hello&nbsp;&nbsp;world&nbsp;&nbsp;</p>

二、空格字符

HTML 处理空格的规则,适用于多种字符。除了普通的空格键,还包括制表符(t)和换行符(r和n)。

浏览器会自动把这些符号转成普通的空格键。

<p>hello
world</p>

上面代码中,文本内部包含了一个换行符,浏览器视同为空格,输出结果如下。

hello world

所以,文本内部的换行是无效的(除非文本放在<pre>标签内)。

<p>hello<br>world</p>

上面代码使用<br>标签显式表示换行

三、CSS 的 white-space 属性

HTML 语言的空格处理,基本上就是直接过滤。这样的处理过于粗糙,完全忽视了原始文本内部的空格可能是有意义的。

CSS 提供了一个white-space属性,可以提供更精确一点的空格处理方式。该属性共有六个值,除了一个通用的inherit(继承父元素),下面依次介绍剩下的五个值。

3.1 white-space: normal

white-space属性的默认值为normal,表示浏览器以正常方式处理空格。

<p>◡◡hellohellohello◡hello
world
</p>

上面代码中,文本前部有两个空格,内部有一个长单词和一个换行符。

然后,容器<p>指定一个比较小的宽度。为了便于识别,背景色设为红色。

p {width: 100px;background: red;
}

显示效果如下图。

a061b74e4bc66049962bab5d559fd05c.png

可以看到,文首的空格被忽略。由于容器太窄,第一个单词溢出容器,然后在后面一个空格处换行。文本内部的换行符自动转成了空格。

3.2 white-space: nowrap

white-space属性为nowrap时,不会因为超出容器宽度而发生换行。

p {white-space: nowrap;
}

显示效果如下图。

5959ebee4732e85e8e96dc307c42fc17.png

所有文本显示为一行,不会换行。

3.3 white-space: pre

white-space属性为pre时,就按照<pre>标签的方式处理。

p {white-space: pre;
}

显示效果如下图。

83888906220e75ec0dead59a74c84f46.png

上面结果与原始文本完全一致,所有空格和换行符都保留了。

3.4 white-space: pre-wrap

white-space属性为pre-wrap时,基本还是按照<pre>标签的方式处理,唯一区别是超出容器宽度时,会发生换行。

p {white-space: pre-wrap;
}

显示效果如下图。

379c3ea10364e1ecc9687da063f460c0.png

文首的空格、内部的空格和换行符都保留了,超出容器的地方发生了折行。

3.5 white-space: pre-line

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

p {white-space: pre-line;
}

显示效果如下图。

a5f3106da93c92630800beb0f04e2117.png

除了文本内部的换行符没有转成空格,其他都与normal的处理规则一致。这对于诗歌类型的文本很有用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/359021.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

宝塔面板绑定域名导致无法访问

用这个命令rm -f /www/server/panel/data/domain.conf删除绑定域名后&#xff0c; 就能用ip端口进入面板了&#xff0c;以后还是不要绑定域名了 主要是因为我手残。 看重点&#xff0c;我是绑定了域名&#xff0c;用域名也无法访问。 现在终于进去啦

宝塔访问域名访问不到

首先说明一点&#xff0c;我这个问题不是宝塔面板绑定域名的那种情况。 浏览器输入域名会报上面的错误&#xff0c;经过各种尝试&#xff0c;发现是安全组没有放开&#xff0c;在阿里云控制台添加一个80/80的通用安全组规则即可&#xff0c;知道上行和下行的区别&#xff0c;打…

双千兆和双频千兆哪个好_关于千兆路由器的那些事儿!赶紧收藏

无线Wi-Fi已成为现代人生活、工作的标配&#xff0c;随着百兆乃至千兆的光纤网络普及&#xff0c;传统路由器已跟不上时代的速度了。不少用户的眼光已投向速度更快的千兆路由器&#xff0c;那么大家真的了解什么是千兆路由器吗&#xff1f;千兆路由器有哪几种&#xff1f;近期火…

华三ospf联动bfd_HCIE2020__路由交换专家__BFD综合实验

1.1.1 关于本实验本实验通过配置BFD与BGP协议联动及与VRRP协议联动&#xff0c;掌握BFD的功能和配置方法。1.1.2 实验目的理解BFD的工作原理。 掌握BFD与BGP联动的应用场景及配置方法。 掌握BFD与VRRP联动的应用场景及配置方法。1.1.3 实验组网介绍图1-1 BFD原理配置实验拓扑图…

大学生助学贷款如何还利息(本金+利息都可以)

生源地助学贷款还利息的步骤: 1、首先需要将钱转入支付宝,金额稍微高于应还款项即可。然后登陆电脑版支付宝,一定是要电脑登陆(手机上无法操作),如图所示 2、然后在支付宝主页中,点击右上角的“应用中心”,然后点击“生活服务”如图所示。

谷歌浏览器下载的内容老是自动打开

原因是每次下载内容在浏览器左下角都有提示&#xff0c;一般都是选择打开所在文件夹&#xff0c;一次手残&#xff0c;点了总是打开此文件导致一下载文件就自动打开。 解决方法。 1.点击右上角的... 2.找到设置-高级设置-下载 3.关掉我标红的位置信息即可。现在看不到啦&…

JBoss Fuse 6.2发布–指导如何快速尝试

在上周的红帽峰会上&#xff0c;宣布发布了JBoss Fuse 6.2 。 我要祝贺保险丝团队发布此版本。 我知道他们今年以来一直非常努力地进行质量检查&#xff0c;并确保质量检查通过了企业产品所期望的高品质壁垒。 因此&#xff0c;带着我的Camel帽子&#xff0c;很高兴看到包含最…

插入文件找不到桌面了?

解决方法&#xff0c;在那个界面空白处&#xff0c;右键显示所有文件即可。

mysql自增长主键_MySQL数据库8(九)列属性之主键、自增长

主键顾名思义&#xff0c;主要的键&#xff0c;primary key&#xff0c;在一张表中&#xff0c;有且只有一个字段&#xff0c;里面的值具有唯一性创建主键随表创建系统提供了两种增加主键的方式&#xff1a;1、直接在需要当做主键的字段之后&#xff0c;增加primary key属性来确…

初学者如何学编程呢

先简单做个测试,这样就能找出你比较适合哪种语言。 下面简单介绍一下不同的语言吧

CellSet 遍历

CellSet 结构&#xff1a; 查询MDX&#xff1a; SELECT NON EMPTY {{ {{ {{ {{ {{ AddCalculatedMembers([店铺.店铺ID].[店铺ID].Members)}} }} }} }} }} DIMENSION PROPERTIES MEMBER_TYPE , [店铺.店铺ID].[店铺ID].[国家], [店铺.店铺ID].[店铺ID].[区域], [店铺.…

如何找到微信公众号的视频链接及视频?

我们经常在微信公众号中看到一些视频,那么有时候看到比较好的我们都希望能把这个视频下载下来,长久保存! 那么,如何找到视频的原链接并下载成为自己的视频呢?我给大家简单总结一下吧。 首先要明白微信公众号的视频来源只会出现在腾讯视频和微视两个平台。 ​以这个公众号…

GetWeApp聊天室 代码(微信小程序)

说明: 实现聊天功能,特色: 使用webSocket实现即时通信 发送和显示表情 数据接口: 数据接口 目录结构&#

每个Java开发人员都必须避免的9个安全错误

Checkmarx CxSAST是功能强大的源代码分析&#xff08;SCA&#xff09;解决方案&#xff0c;旨在从根本上识别&#xff0c;跟踪和修复技术和逻辑安全缺陷&#xff1a;源代码。 在这里查看 &#xff01; 自从1995年中期引入Java以来​​&#xff0c;它已经走了很长一段路。 它的…

[转]iPhone本地化总结

再做本地化的过程中参考了许多资料&#xff0c;现在的中文资料还是少之又少&#xff0c;希望能给大家一些帮助。 1、本地化字符串&#xff0c;网上那些方法我就不说了&#xff0c;我只更正一点&#xff1a;如果你的Classes下面有子文件夹会报错&#xff0c;使用下面的命令&…

【APICloud系列|9】APICloud自定义APPloader一个月未更新,快速更新的办法

时间比较紧,简单写一下流程。 1.登录APICloud后台,找到模块,自定APPLoader,直接编译ANdroid版本,下载到本地。 2.找到当时创建自定义apploader的文件夹,将下载的安装包复制过来,并重新命名为load.apk,删除原来的安装包。 3.修改load.conf配置文件.并保存关闭。 版本号从…

珍藏多年的视频文案网站

5g元年&#xff0c;视频需要的文案网站你值得拥有 一、TOPYS | 全球顶尖创意分享平台 网址链接&#xff1a;TOPYS:https://www.topys.cn/ TOPYS立志打造一个多元、完备的泛创意知识产品系统和学习平台&#xff0c;试图成为A Creative Institution&#xff0c;希望借由创意的学…

vue项目安装less_部署vue项目、安装mongodb

一、node运行环境1、npm install -g n 通过npm 全局安装node2、sudo n 8.16.0 设置node版本Password:install : node-v8.16.0mkdir : /usr/local/n/versions/node/8.16.0fetch : https://nodejs.org/dist/v8.16.0/node-v8.16.0-darwin-x64.tar.gz#############################…

电脑正常启动黑屏,安全模式正常启动的解决办法

今天早上起来&#xff0c;打开电脑&#xff0c;输入账号信息进入后发现是黑屏&#xff0c;本以为电脑卡顿等等看&#xff0c;我看还是黑屏就关机重启了几次发现还是黑屏&#xff0c;然后进入安全模式下发现页面能打开&#xff0c;但是我们都知道安全模式只会加载一些必要的程序…

2.4 万余门在线课程免费开放!大量计算机相关课程.(赶紧收藏)

日前,教育部印发指导意见,面向全国高校免费开放全部优质在线课程和虚拟仿真实验教学资源。 截至 2 月 2 日,教育部组织了 22 个在线课程平台制定了多样化在线教学解决方案,免费开放包括 1291 门国家精品在线开放课程和 401 门国家虚拟仿真实验课程在内的在线课程 2.4 万余门…