博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Html的空格显示
阅读量:4619 次
发布时间:2019-06-09

本文共 1400 字,大约阅读时间需要 4 分钟。

一、使用全角空格

全角空格被解释为汉字,所以不会被被解释为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://www.cnblogs.com/mengfanrong/p/3789474.html

你可能感兴趣的文章
paip.多维理念 输入法的外码输入理论跟文字输出类型精髓
查看>>
使用classList和dataset实现tab切换
查看>>
SqlServer统计最近一周的数据
查看>>
2014年第五届蓝桥杯试题C/C++程序设计B组——李白打酒
查看>>
第二章:08运算符[运算优先级]
查看>>
Wireshark 解析 自定义 加密 协议
查看>>
Extjs4 MVC Controller使用方法
查看>>
input处理函数
查看>>
同一套代码部署到两台机器上,只有一台机器上的页面中文乱码
查看>>
第8次作业
查看>>
白日焰火,虽然绚烂,但也短暂。
查看>>
找不到regionserver的问题总结
查看>>
设计模式开篇综述(Java)
查看>>
Java基础——集合(持续更新中)
查看>>
《五》包装流
查看>>
CUDA 关于 BLOCK数目与Thread数目设置
查看>>
Ubuntu 安装java环境搭建
查看>>
vSphere、Hyper-V与XenServer 你选哪个?
查看>>
关于oracle的备份 导入
查看>>
1.网络工具:ifconfig,ping,netstate,Redhat命令和图形化设置ip,finger,nslookup
查看>>