年轻？大有所为！——问题集三空格

原创于 2015-04-23 10:45:34 发布 · 507 阅读

0 ·

CC 4.0 BY-SA版权

divcss 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了在HTML中处理空格的多种方法，包括使用不间断空格( )、预格式化标签<pre>、调整CSS white-space属性等，帮助网页开发者更好地控制文本布局。

连续多个空格往往会被浏览器认为只有一个，但我想要实现多个连续的空格，应该怎么办了？

<!DOCTYPE html>
<html>
<head>
<title>测试空格ing</title>
<meta http-equiv="Content-Type" Content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div id="center">
<h1>《登鹳雀楼》</h1>王之涣
白日依山尽,黄河入海流.欲穷千里目,更上一层楼.
</div>
</body>

</html>

首先对诗句不做空格等处理：

解决方法：

1.不间断空格( )代表空格的转意字符——让每一句诗句之间有多个空格，增加间隙。
& nbsp;为html空格字符代码，由“&+n+b+s+p+;”组成，记住最后一个分号不要忘记了!此时处理少量必要的空格是蛮重要的知识点哦。

有人说，不如每句后面加上 ，这样四句摆得整整齐齐不更好看了，还讲什么空格的！

那这种情况怎么实现，即使你在句头空了多少格都始终是对齐的：

所以换行后使用&nbsp使每句诗头带有缩进

白日依山尽, 
 黄河入海流. 
  欲穷千里目, 
   更上一层楼.

觉得空格不明显，好吧，可以改变空格显示的样式啊：

黄河入海流.

结果：你会发现空格横向上增大了，当然纵向上诗句的距离也随着字号增大受到了影响。这得看你自己去调节适合自己的样式啦。

那这样吧，高度就不受影响啦，改成： 黄河入海流.

ok!

2.pre

<pre> 这是预格式文本。它保留了空格和换行，文本也会呈现为等宽字体。这最简单啦，即原样显示。

不过就因为它空格换行都保留啦，这样写：

<pre id="middle">
白日依山尽,
黄河入海流.
欲穷千里目,
更上一层楼.
</pre>

很明显，我们可以看到位置显示偏差很大。就是因为pre标签头到第一句诗头之间的空格都完全写下了哦，不要忽略。

所以我想最好这样写：

<pre id="middle">白日依山尽,<br>  黄河入海流.<br>    欲穷千里目,<br>      更上一层楼.
</pre>

哈哈，这就成啦：

3.margin/padding

这是针对每一句诗句都是一个元素的时候，来设置元素间的间距啦！啊啊啊，感觉很废啊！算了，还是提提它吧。

4.最后，延伸一下：

<p id="middle">白日依山尽,<br>  黄河入海流.<br>    欲穷千里目,<br>      更上一层楼.
</p>

（1）CSS white-space属性:设置如何处理元素内的空白.

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

pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

那么写成：

白日依山尽, 黄河入海流. 欲穷千里目, 更上一层楼.

就OK啦

（2）HTML DOM style.whiteSpace 属性:设置或返回如何处理文本中的制表符、换行符和空格符。

语法：

Object.style.whiteSpace="normal|nowrap|pre|inherit"

normal默认的，自动忽略空格符和换行符。

nowrap忽略空格符，但是不允许换行符。
pre 换行符和其他空格符会被保留。
inherit whiteSpace 属性的值从父元素继承。

所有主要浏览器都支持 whiteSpace 属性。注意：IE7 及更早的版本不支持 "inherit" 值。IE8 只有规定了 !DOCTYPE 才支持 "inherit"。IE9 支持 "inherit"。

这是动态改变文本处理：

<!DOCTYPE html>
<html>
	<head>
		<title>测试空格ing</title>
		<meta http-equiv="Content-Type" Content="text/html; charset=UTF-8" />
		<link rel="stylesheet" type="text/css" href="test.css">
		<script type="text/javascript">
			function changeT () {
				document.getElementById("middle").style.whiteSpace="pre";
			}	
		</script>
		
	</head>
	<body>
		<div id="center">
			<h1>《登鹳雀楼》</h1><p id="name">王之涣</p>
			<p id="middle">白日依山尽,<br>  黄河入海流.<br>    欲穷千里目,<br>      更上一层楼.
			</p>
			<input type="button" value="点击保留空格" onclick="changeT()">
		</div>
	</body>
</html>