整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML代码中的空格和空行

子1:(文本内容中的连续空格)

<p>这段文本中,输入连续的空格          大概输入了十个。</p>

显示效果:“格”和“大” 之间的是个空格显示出来只是一个空格。

这段文本中,输入连续的空格 大概输入了十个。

例子2:(代码之间的连续空格)

<span>span是一个行内标签</span>               <span>和前面的span元素之间隔了很多个空格</span>

显示效果:两个span元素之间连续的空格,显示出来即"签"与“和”之间的空格,只有一个空格。

span是一个行内标签 和前面的span元素之间隔了很多个空格

上面两个例子证明:HTML代码中连续的空格在显示时会显示为一个空格,其余的多余的空格会被移除或者说被忽略。

段落文本其实也是HTML代码的一部分,只不过它在p标签内部,而例子2的空格是在两个span标签之间。


理解了空格,现在看看空行,同理

例子3:(文本内容中的空行)

<p>这段文本中,输入连续的空行





大概输入了五行。</p>

显示效果:如我们所见,文本代码中的五行空行,显示出来也只是一个空格。

这段文本中,输入连续的空行 大概输入了五行。

例子4:(元素之间/标签之间的空行),只要把例子2中的空格换成空行就可以了,显示效果和例子2的一样,多行空行都只会显示为一个空格。

<span>span是一个行内标签</span>





<span>和前面的span元素之间隔了很多空行</span>


span是一个行内标签 和前面的span元素之间隔了很多空行

得证:HTML 代码中的所有连续的空格或空行(换行)都会被显示为一个空格。


既然如此,如果我们希望扩大两个字符之间的间距,让代码中的连续空格或空行显示出来的结果也是连续的空格或空行,那该怎么办?其实很简单。

方法一:我们可以用预格式化标签<pre>,无论是空格或空行都适用。

<pre>
这是
预格式文本。
它保留了      空格
和换行。
</pre>

显示效果

这是
预格式文本。
它保留了      空格
和换行。


方法二:我们可以用空格实体符 代替空格,用换行标签<br/>代替空行。虽然这种方法可以得到我们想要的显示效果,但是对搜索引擎不是最友好的方式,因为 和<br/>在HTML中都是没有语义的。所以建议尽量少用。另外需要注意的是, 必须小写,而且最后面的分号是不能省略的。


方法三:(适合空格)使用全角空格

全角空格被解释为汉字,所以不会被被解释为HTML分隔符,可以按照实际的空格数显示。

问题:怎么使用全角输入法?

以搜狗输入法为例,我们通常使用的是半角输入,其状态栏中有个月亮的标志,就说明正在使用的是半角输入,如果是太阳的标志,就说明使用的是全角输入。全角/半角的切换可以通过点击标志,也可以通过快捷键 Shift+Space(空格符)切换。

半角输入(月亮)

全角输入(太阳)

方法四:使用CSS样式中字间隔属性控制,CSS中的word-spacing 属性可以改变字(单词)之间的标准间隔。我们知道英文中两个单词之间是通过空格隔开的,所以我们视觉上可以这样认为,word-spacing改变了(拉长或缩短)单词之间那个空格的宽度。

方法五:使用CSS样式中的white-space 属性,这个属性声明如何处理元素内的空白符。

描述

normal

默认。空白会被浏览器忽略。

pre

空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

nowrap

文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

pre-wrap

保留空白符序列,但是正常地进行换行。

pre-line

合并空白符序列,但是保留换行符。


white-space:normal;就是正常,和不设置一样,连续空格和空行都只会显示一个空格。

white-space:nowrap;不换行是什么意思呢?正常情况下,当我们的文本超出了文本域,文本就会自动折行,这个设置就是说不自动折行了,而是碰到换行标签<br />才换

white-space:pre;和方法一相同,将文本原样输出显示。当文本超出文本域时,不换行,会产生滚动条。

white-space:pre-wrap;保留空格和空行,但当文本超出文本域时,会自动换行。

white-space:pre-line;连续的空格会显示为一个空格,但保留连续的空行。

机关及其直属机构2022年度

考试录用公务员云南考区笔试重要提示

各位考生:

中央机关及其直属机构2022年度考试录用公务员笔试将于2021年11月27日、28日举行。为进一步提升服务保障质量,确保考生顺利参考,现将有关事项提示如下。

一、重点事项提示

(一)按要求打印准考证。请考生于2021年11月22日00:00—11月28日12:00自行下载打印准考证,打印准考证前须仔细阅读《中央机关及其直属机构2022年度考试录用公务员云南考区笔试新冠肺炎疫情防控告知暨承诺书》,下载打印准考证即视为认同并签署《中央机关及其直属机构2022年度考试录用公务员云南考区笔试新冠肺炎疫情防控告知暨承诺书》。准考证是考生参加笔试的必须凭证,务必妥善保管,请仔细阅读并遵守所载内容。

(二)准确掌握考点名称和地址。本次笔试,我省在昆明市、昭通市、曲靖市、玉溪市、楚雄州、红河州、德宏州芒市和瑞丽市八个城市设置考点,请考生务必认清考点名称、提早熟悉考点地址和交通路线,避免走错考点、找错考场、坐错座位。考试当天,请合理安排出行,以免影响正常参考。

(三)按要求做好疫情防控。

1.考生须考前3天提前申领“云南健康码”和“通信大数据行程卡”,并于本人首场考试考前48小时内进行新冠病毒核酸检测。做好日体温测量和健康状况监测,持续关注健康码状态,有异常情况须及时报告考点所在州(市)人力资源社会保障部门。

2.考试当天,考生应至少提前1小时到达考点。考生进入考点前,应当主动出示本人“云南健康码”“通信大数据行程卡”信息,出具本人首场考试考前48小时内有效核酸检测阴性证明,按要求主动接受体温测量。未出具核酸检测阴性证明的,不得进入考点。

(1)“云南健康码”为绿码,“通信大数据行程卡”为绿码且14日内未到过存在中高风险地区的城市(即行程卡绿码中无*号标记),现场测量体温正常(≤37.3℃),考前48小时内核酸检测结果为阴性的考生,可进入考点参加笔试。体温异常(>37.3℃)由驻点医疗专业防疫人员进行初步排查,可排除疑似新冠肺炎的,经询问个人身体状况,能坚持考试者,由工作人员引导至备用考场进行笔试。

(2)“云南健康码”为黄码,“通信大数据行程卡”显示到过国内中风险地区的城市的考生,须提供笔试前3天内2次(每次间隔不低于24小时)有效的核酸检测阴性证明,现场测量体温正常(≤37.3℃)可进入普通考场参加考试,未提供证明的不得进入考点。体温异常(>37.3℃)由驻点医疗专业防疫人员进行初步排查,可排除疑似新冠肺炎的,经询问个人身体状况,能坚持考试者,由工作人员引导至备用考场进行笔试。

(3)近期有过边境县(市、区)旅居史的考生,须提供笔试前7天内两次(最近一次检测应在首场考试前48小时内)有效的核酸检测阴性证明。

(4)近一个月内有境外旅居史的考生,须提供14天有效的集中医学隔离观察证明和7天有效居家隔离观察证明、考试前3天内2次(每次间隔不少于24小时)有效的核酸检测阴性证明,现场测量体温正常(≤37.3℃)可进入普通考场参加考试,未提供证明的不得进入考点。体温异常(>37.3℃)由驻点医疗专业防疫人员进行初步排查,可排除疑似新冠肺炎的,经询问个人身体状况,能坚持考试者,由工作人员引导至备用考场进行笔试。

(5)“云南健康码”为红码的考生不得进入考点。

(6)身体有其他异常情况的考生,需配合驻点医疗专业防疫人员做好健康风险研判。经复测复查确有发热或呼吸道异常症状的考生,由驻点医疗专业防疫人员进行个案预判,对能排除疑似新冠肺炎且具备继续考试条件的,转移至备用考场考试,对不能排除的,一律由负压救护车转运至定点医院就诊排查。

3.考生自备一次性医用口罩,赴考时如乘坐公共交通工具,需要全程佩戴口罩,可佩戴一次性手套,并做好手部卫生,同时注意保持安全社交距离。

4.考试期间,考生要自觉维护考试秩序,与其他考生保持安全社交距离,服从现场工作人员安排,考试结束后按规定有序离场。

5.考生如因有相关旅居史、密切接触史等流行病学史被集中隔离,笔试当天无法到达考点的,视为主动放弃考试资格。

6.请考生注意个人防护,考生进入考点内,除核验信息时须配合摘下口罩以外,考试全程应佩戴一次性医用口罩。

7.如考试前出现新的疫情变化,将通过云南人力资源和社会保障网“人事考试专栏”(https://hrss.yn.gov.cn/ynrsksw/Index.html)及时发布补充公告,明确疫情防控要求,请广大考生密切关注。

8.考生凡隐瞒或谎报旅居史、接触史、健康状况等疫情防控重点信息,不配合工作人员进行防疫检测、询问等的,取消考试资格,如有违法情况,将依法追究法律责任。

(四)带齐证件。考生须带齐准考证、本人有效身份证件原件(与报名时一致)和本人首场考试考前48小时内有效新冠病毒核酸检测阴性证明方可参加考试。考试开始前60分钟起接受安检有序进入考场,对号入座,坐错座位根据相关规定按违规违纪处理。两证不全或不一致或未出具有效核酸检测阴性证明者,不得进入考场。考试开始30分钟后一律禁止入场,考试期间不得交卷、离场;离场后不得再次进入考场。

(五)严禁将禁止物品带入考场。考生进入考场时,除规定文具、准考证、身份证外的其他物品须放置在考场门口柜子或桌子上(通讯设备、电子设备必须全部切断电源),严禁将各类手表和各种电子、通信、计算、存储或其它有关设备及与考试相关的资料等物品带入考场。考生在座次表上签到时,须填写本人手机号码。

(六)考生有责任和义务在监考人员拆封试卷前查验密封情况并签字确认。

(七)试卷和答题卡发放后,考生应立即检查本人卷卡是否有装订印刷错误或污损,如有问题立即举手向监考人员报告,否则后果自负。《行政职业能力测验》科目答题卡印制在试卷封底内页,开始答题前,考生请沿裁切线自行小心撕下。考生必须在配套答题卡上作答,卷卡不一将影响考试成绩。

(八)《行政职业能力测验》科目一律用2B铅笔在答题卡上填涂作答,《申论》科目一律用黑色字迹的钢笔、签字笔作答。考生应自备橡皮、2B铅笔、黑色字迹的钢笔或签字笔。为保障考试的公平公正性,考试期间,监考人员将对考生携带的文具进行检查,请考生予以配合。

(九)遵守规则,诚信参考。考生须按准考证所载内容要求参加考试,严格遵守考场规则,自觉服从考试工作人员管理,接受监考人员的监督和检查,诚信参考,避免出现违规违纪行为。考生出现违规违纪行为,将按《公务员录用违规违纪行为处理办法》有关规定处理,构成犯罪的,依法追究刑事责任。

二、法律法规提示

(一)《刑法修正案(九)》规定:“在法律规定的国家考试中,组织作弊的,处三年以下有期徒刑或者拘役,并处或者单处罚金;情节严重的,处三年以上七年以下有期徒刑,并处罚金”“为他人实施前款犯罪提供作弊器材或者其他帮助的,依照前款的规定处罚”“为实施考试作弊行为,向他人非法出售或者提供第一款规定的考试的试题、答案的,依照第一款的规定处罚”“代替他人或者让他人代替自己参加第一款规定的考试的,处拘役或者管制,并处或者单处罚金”。

(二)《最高人民法院最高人民检察院关于办理组织考试作弊等刑事案件适用法律若干问题的解释》明确“中央和地方公务员录用考试”属于“法律规定的国家考试”,考试作弊触犯刑法,属于犯罪。

三、公务员录用违规违纪行为处理办法摘录

第六条 报考者在考试过程中有下列行为之一的,由具体组织实施考试的考试机构、招录机关或者公务员主管部门给予其所涉科目(场次)考试成绩为零分的处理:

(一)将规定以外的物品带入考场,经提醒仍未按要求放在指定位置的;

(二)参加考试时未按规定时间入场、离场的;

(三)未在指定座位参加考试,或者擅自离开座位、出入考场的;

(四)未按规定填写(填涂)、录入本人或者考试相关信息,以及在规定以外的位置标注本人信息或者其他特殊标记的;

(五)故意损坏本人试卷、答题卡(答题纸)等考场配发材料或者本人使用的考试机等设施设备的;

(六)在考试开始信号发出前答题的,或者在考试结束信号发出后继续答题的;

(七)其他情节较轻的违规违纪行为。

第七条 报考者在考试过程中有下列行为之一的,由设区的市级以上公务员主管部门给予其取消本次考试资格并五年内限制报考公务员的处理:

(一)抄袭他人答题信息或者协助他人抄袭答题信息的;

(二)查看、偷听违规带入考场与考试有关的文字、视听资料的;

(三)使用禁止携带的通讯设备或者具有计算、存储功能电子设备的;

(四)携带具有避开或者突破考场防范作弊的安全管理措施,获取、记录、传递、接收、存储考试试题、答案等功能的程序、工具,以及专门用于作弊的程序、工具(以下简称作弊器材)的;

(五)抢夺、故意损坏他人试卷、答题卡(答题纸)、草稿纸等考场配发材料或者他人使用的考试机等设施设备的;

(六)违反规定将试卷、答题卡(答题纸)等考场配发材料带出考场的;

(七)其他情节严重、影响恶劣的违规违纪行为。

第八条 报考者在考试过程中有下列行为之一的,由省级以上公务员主管部门给予其取消本次考试资格并终身限制报考公务员的处理:

(一)使用伪造、变造或者盗用他人的居民身份证、准考证以及其他证明材料参加考试的;

(二)3人以上串通作弊或者参与有组织作弊的;

(三)代替他人或者让他人代替自己参加考试的;

(四)使用本办法第七条第四项所列作弊器材的;

(五)非法侵入考试信息系统或者非法获取、删除、修改、增加系统数据的;

(六)其他情节特别严重、影响特别恶劣的违规违纪行为。

第九条 在阅卷过程中发现报考者之间同一科目作答内容雷同,并经阅卷专家组确认的,由具体组织实施考试的考试机构给予其该科目(场次)考试成绩为零分的处理,录用程序终止。作答内容雷同的认定方法和标准由省级以上考试机构确定。

报考者之间同一科目作答内容雷同,并有其他相关证据证明其作弊行为成立的,视具体情形按照本办法第七条、第八条的规定处理。

第十二条 报考者应当自觉维护公务员录用工作秩序,有下列行为之一的,应当终止其录用程序;情节严重、影响恶劣的,由设区的市级以上公务员主管部门给予其取消本次考试资格并五年内限制报考公务员的处理;情节特别严重、影响特别恶劣的,由省级以上公务员主管部门给予其取消本次考试资格并终身限制报考公务员的处理:

(一)故意扰乱考点、考场等工作场所秩序的;

(二)拒绝、妨碍工作人员履行管理职责的;

(三)威胁、侮辱、诽谤、诬陷、殴打工作人员或者其他报考者的;

(四)通过搞利益输送或者利益交换,谋取考试资格、录用机会、经济利益以及其他不当利益的;

(五)购买本办法第七条第四项所列作弊器材的;

(六)其他扰乱公务员录用工作秩序的行为。

第十三条 报考者在公务员录用中有违规违纪行为,涉嫌违法犯罪的,移送有关国家机关依法处理。

报考者为国家公职人员的,应当将其违规违纪行为和处理结果通报所在单位。

各位报考者请仔细阅读以上事项,科学备考、顺利参考!

云南省人事考试院

2021年11月19日

来源: 掌上春城

前端工作中,设计代码时,经常会有人手动删除行内元素之间产生的额外空隙,并通过设置margin或padding来获取想要间距吗?如代码:

<div class=“”><span class=“bgr”>去掉了间距</span><span class="bgr">去掉了间距</span><span class="bgr">去掉了间距</span><span class="bgr">去掉了间距</span><span class="bgr">去掉了间距</span><span class="bgr">去掉了间距</span></div>

这看起来很不舒服,特别扔给给JS同事后,JS同事看完代码后就会提出抱怨,代码太乱,他们希望的代码是如下:

<div class="">
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
</div>

那么有什么好的办法解决的?答案也是有的。

1.行内元素之间的“换行符”产生间距

<div class="">

<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
</div>

展现效果如下:

2.行内元素之间使用“tab(制表符)”产生间距

<div class="">
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
</div>

展现效果如下:

3.行内元素之间使用“空格”产生间距

<div class=""><span class="bgr">换行符产生间距</span> <span class="bgr">换行符产生间距</span> <span class="bgr">换行符产生间距</span> <span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span> <span class="bgr">换行符产生间距</span>
</div>

展现效果如下:

上以上3点可以看出,行内元素之间产生的间距,是由于换行符、tab(制表符)、空格等字符引起,而字符的大小是定义字体大小来控制。

那么改变字体的大小可调整行内元素的间距么?

上图把字体从0px~18px~36px的调整,可见行内元素之间的水平间距从无到有,并不断变大,说明行内元素之间产生间距是由换行符、tab(制表符)、空格等字符引起的,那么设置字体大小font-size:0可以是不是可以在所有浏览器中除去这些间距呢?

经过测试后,可发现设置font-size:0并不能使得换行符、tab(制表符)、空格等在所有浏览器中产生的额外间距消失:

1.IE6、7浏览器始终存在的 1px 空隙

2.最新版本的Safari浏览器(5.1.7)不支持定义字体大小为 0 的浏览器

通过查找资料后,一种比较正常的解决方法如下:

1.针对IE6、7浏览器,使用word-spacing 修复 IE6、7 中始终存在的 1px 空隙,减少单词间的空白(即字间隔)

*word-spacing:-1px;

2.使用webkit的私有属性,让字体大小不受设备终端的调整,可定义字体大小小于12px

html{-webkit-text-size-adjust:none;}

问题解决了,代码如下:

结构:

<div class="span-wrap">
<span>字符产生间距</span>
<span>字符产生间距</span>
<span>字符产生间距</span>
<span>字符产生间距</span>
<span>字符产生间距</span>
<span>字符产生间距</span>
</div>

样式:

html{
-webkit-text-size-adjust:none;/* 使用webkit的私有属性,让字体大小不受设备终端的调整,可定义字体大小小于12px */
}

.span-wrap {
font-size:0;/* 所有浏览器 */
*word-spacing:-1px;/* 使用word-spacing 修复 IE6、7 中始终存在的 1px 空隙,减少单词间的空白(即字间隔) */
}

.span-wrap span{
font-size: 12px;
letter-spacing: normal;/* 设置字母、字间距为0 */
word-spacing: normal; /* 设置单词、字段间距为0 */
}

干脆直接使用浮动,简单,也不用写多余的hack,多好。的确使用浮动技术是比较好的办法,实际工作中我们使用浮动也是比较多,但是也并不是每处地方都要使用浮动,而且使用浮动后还需要清除浮动的操作。

文/丁向明

做一个有博客的web前端自媒体人,专注web前端开发,关注用户体验,加我qq/微信交流:6135833

http://dingxiangming.com