Html的空格显示

Html的空格显示

一、使用全角空格

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

二、使用空格的替代符号

替代符号就是在须要显示空格的地方添�替代符号,这些符号会被浏览器解释为空格显示。

空格的替代符号有下面几种:

名称 编号 描写叙述
    不断行的空白(1个字符宽度)
    半个空白(1个字符宽度)
    一个空白(2个字符宽度)
    窄空白(小于1个字符宽度)

能够用名称或编号作为空格的替代符号,名称必须小写,末尾的“;”不能省略。

如:

欢  迎  光  临!

显示效果为:欢  迎  光  临!

三、使用CSS的 white-space 属性

CSS的white-space属性用于设置文本中空格的处理方式,当white-space属性取值为pre时,浏览器会保留文本中的空格和换行,这样你就能够直接在文本中使用空格和回车了。

这样的方法特别适合于在网页中显示程序代码。比方:显示一段C程序代码。

<div style=”
white-space:pre“>int sub(int x,int y){    int z;    if( x&gt;y )        z = x-y;    else        z = y-x;    return z;}</div>

显示效果为:

int sub(int x,int y){    int z;    if( x>y )        z = x-y;    else        z = y-x;    return z;}

使用HTML的<pre>标签也能够达到类似的效果,但<pre>标签有一些不太好的特性,不如使用CSS的white-space属性更方便。

四、使用CSS的 letter-spacing 属性

CSS的letter-spacing属性用于设置文本中字符之间的间隔,它的取值能够是一个带单位的长度值,浏览器会在字和字之间设置指定长度的空白。比方:

<div style=”
letter-spacing:30px“>欢迎光临!</div>

显示效果为:

欢迎光临!

注意,假设文本中有英文单词,则空白会加在字母之间,而不是单词之间。

五、使用CSS的 word-spacing 属性

CSS的word-spacing属性用于设置文本中单词之间的间隔,它的取值能够是一个带单位的长度值,浏览器会在单词和单词之间设置指定长度的空白。比方:

<div style=”
word-spacing:30px“>Happy new year!</div>

显示效果为:

Happy new year!

注意,HTML是以空格来区分单词的,它会把单词间的空白按指定长度显示。

六、使用CSS的 text-indent 属性

CSS的text-indent属性用于设置首行缩进,它的取值能够是一个带单位的长度值,浏览器会在段落的首行開始处设置指定长度的空白。比方:

<div style=”
text-indent:2em“>欢迎光临!</div>

显示效果为:

欢迎光临!

说明:em 是一个相对长度单位,2em 表示要缩进两个字的距离。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/118991.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • mybatis框架–学习笔记(下)

    mybatis框架–学习笔记(下)

    2021年9月26日
    45
  • c++编写入门版贪吃蛇,只要你想学就能学会

    c++编写入门版贪吃蛇,只要你想学就能学会

    2021年3月12日
    221
  • 记一次阿里云服务器因Redis被【挖矿病毒crypto和pnscan】攻击的case,附带解决方案

    记一次阿里云服务器因Redis被【挖矿病毒crypto和pnscan】攻击的case,附带解决方案一、事情缘由前段时间给大家录制《玩转Docker》教学视频,链接请参阅https://www.bilibili.com/video/BV1BK4y1A78M,为了更好的演示,就在阿里云搞了一个云服务器,自己本地连接。 云服务器到手之后,为了可以让自己本地可以连接到阿里云服务器上就做了如下操作: 开放了ssh(port:22)端口:为了远程连接使用。 开放了剩余的其他所有端口:录制教学视频时启动了相关容器,容器的一些固定端口6379等映射到了宿主机的随机端口上,为了能从公网访问到容器的内容,就开放

    2022年6月10日
    33
  • python多线程的几种方法

    python多线程的几种方法python多线程编程Python多线程编程中常用方法:1、join()方法:如果一个线程或者在函数执行的过程中调用另一个线程,并且希望待其完成操作后才能执行,那么在调用线程的时就可以使用被调线程

    2022年7月3日
    28
  • log4j pattern详解_标题的含义和作用ppt

    log4j pattern详解_标题的含义和作用pptConversionPattern参数的格式含义格式名含义%c输出日志信息所属的类的全名%d输出日志时间点的日期或时间,默认格式为ISO8601,也可以在其后指定格式,比如:%d{yyy-MM-ddHH:mm:ss},输出类似:2002-10-18-22:10:28%f输出日志信息所属的类的类名%l输出日志事件的发生位置,即输出日志信息的语句处于它所在…

    2022年8月22日
    5
  • phpstorm 激活_在线激活

    (phpstorm 激活)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年3月28日
    110

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号