Html中各种空格的显示
一、使用全角空格
全角空格被解释为汉字,所以不会被被解释为HTML分隔符,可以按照实际的空格数显示。
二、使用空格的替代符号
替代符号就是在需要显示空格的地方加入替代符号,这些符号会被浏览器解释为空格显示。
空格的替代符号有以下几种:
名称编号描述 不断行的空白(1个字符宽度)  半个空白(1个字符宽度)  一个空白(2个字符宽度)  窄空白(小于1个字符宽度)
可以用名称或编号作为空格的替代符号,名称必须小写,末尾的“;”不能省略。
如:
显示效果为:欢 迎 光 临!
三、使用CSS的 white-space 属性
CSS的white-space属性用于设置文本中空格的处理方式,当white-space属性取值为pre时,浏览器会保留文本中的空格和换行,这样你就可以直接在文本中使用空格和回车了。
这种方法特别适合于在网页中显示程序代码。比如:显示一段C程序代码。
显示效果为:
使用HTML的<pre>标签也可以达到类似的效果,但<pre>标签有一些不太好的特性,不如使用CSS的white-space属性更方便。
四、使用CSS的 letter-spacing 属性
CSS的letter-spacing属性用于设置文本中字符之间的间隔,它的取值可以是一个带单位的长度值,浏览器会在字和字之间设置指定长度的空白。比如:
显示效果为:
注意,如果文本中有英文单词,则空白会加在字母之间,而不是单词之间。
五、使用CSS的 word-spacing 属性
CSS的word-spacing属性用于设置文本中单词之间的间隔,它的取值可以是一个带单位的长度值,浏览器会在单词和单词之间设置指定长度的空白。比如:
显示效果为:
注意,HTML是以空格来区分单词的,它会把单词间的空白按指定长度显示。
六、使用CSS的 text-indent 属性
CSS的text-indent属性用于设置首行缩进,它的取值可以是一个带单位的长度值,浏览器会在段落的首行开始处设置指定长度的空白。比如:
显示效果为:
说明:em 是一个相对长度单位,2em 表示要缩进两个字的距离。
Html中各种空格的显示的更多相关文章
- eclipse中show whitespace characters显示代码空格,TAB,回车 导致代码乱恶心
Eclipse中show whitespace characters显示回车.空格符. 取消此功能的第二种方式:
- 使用innerHTML获取HTML代码时,HTML标记属性的双引号好多都消失不见了,原来是属性值中包含空格才会保留双引号
最近搞的一个项目中所使用的方式比较奇怪,用Label显示HTML内容,然后不断地使用JS把Label的innerHTML复制到TextBox中. 但是,昨天发现了一个问题,获取元素值的时候,有时候正常 ...
- URL中的空格
如果URL中带空格,在浏览器中可以显示,但是如果访问比如 UIImage 获取图片的时候就会出现BAD URL. 解决: NSString* urlText = @"70.84.58.40/ ...
- [HTML]在页面中输出空格的几种方式
JS中如何输出空格 在写JS代码的时候,大家可以会发现这样现象: document.write(" 1 2 3 "); 结果: 1 2 ...
- HTML代码中的空格和空行
HTML 代码中的所有连续的空格或空行(换行)都会被显示为一个空格. 例子1:(文本内容中的连续空格) 代码 <p>这段文本中,输入连续的空格 大概输入了十个.</p> 显示效 ...
- Linux - Shell - 替换文件名中的空格
概述 使用 shell 替换 文件名中的空格 背景 尝试用 find 配合 xargs, 在多个文件里找关键字 出现了问题 有空格的文件名, 并不是很好处理 准备 os centos7 1. 问题: ...
- String 中去掉空格
JAVA中去掉空格 1. String.trim() trim()是去掉首尾空格 2.str.replace(" ", ""); 去掉所有空格,包括首尾.中间 ...
- win7系统中如何使文件显示出扩展名
win7系统中如何使文件显示出扩展名-------------------- 1.点击计算机-->>点击组织,然后选择"文件夹及搜索选项"-->> ---- ...
- JAVA中去掉空格经典整理
JAVA中去掉空格经典整理 JAVA中去掉空格 1. String.trim() --------------trim()是去掉首尾空格 2.str.replac ...
随机推荐
- VIM for Python and Django Development
VIM for Python and Django Development VIM-PyDjango created by Programmer for Programmer who work on ...
- Centos 6.0将光盘作为yum源的设置方法
在使用Centos 的时候,用yum来安装软件包是再方便不过了,但是如果在无法连接互联网的情况下,yum就不好用了. 下面介绍一种方式,就是将Centos安装光盘作为yum源,然后使用yum来安装软件 ...
- Python QQ群
微信公众号:Python中文社区 Python初级技术交流QQ群:152745094Python高级技术交流QQ群:273186166Python网络爬虫组QQ群:206241755PythonWeb ...
- RandomAccessFile类
File类只是针对文件本身进行操作,而如果要对文件内容进行操作,则可以使用RandomAccessFile类,此类属于随机读取类,可以随机地读取一个文件中指定位置的数据. //============ ...
- JavaScript学习笔记——DOM_对document对象的内容、属性、样式的操作
javascript-对文档对象的内容.属性.样式的操作 一.操作内容 1. innerHTML 用来设置或获取对象起始和结束标签内的内容(识别html标签) 2. innerText 用来设置或获取 ...
- 关于webpack抛出对象到全局的问题
一般情况下,我们用webpack的时候.大多是用在单页应用上. 单是,某些情况下,我们用来做多页面的时候,有的时候,会需要在html内嵌 <script>,比如说,这个页面是服务端渲染的, ...
- 安卓、swiper标准的文字滚动
溢出滚动基本原理还是relative,absolute. 核心高度 swiper-wrapper 和gun-swiper-slide 的自适应高度成为关键 <style> .gun-s ...
- php的if语句单行与多行
//正确: //错误写法 $b = //if前面不能带 等号
- jQuery 鼠标拖拽移动窗口
拖拽移动需要注意的是:拖拽移动的窗口是如何定位的,如果"left"属性为"%" ,以"margin-left"来计算定位,如下实例,如果&q ...
- Servlet的配置
让 Servlet 能响应用户请求,必须将 Servlet 配置在 Web 应用中. Servlet 3.0 中有两中配置方式: 1. 在 Servlet 类中使用 @WebServle ...