连续多个空格往往会被浏览器认为只有一个,但我想要实现多个连续的空格,应该怎么办了?
<!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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
</head>
<body>
<div id="center">
<h1>《登鹳雀楼》</h1><p id="name">王之涣</p>
<p id="middle">白日依山尽,黄河入海流.欲穷千里目,更上一层楼.</p>
</div>
</body>
</html>
首先对诗句不做空格等处理:
解决方法:
1.不间断空格( )代表空格的转意字符——让每一句诗句之间有多个空格,增加间隙。
& nbsp;为html空格字符代码,由“&+n+b+s+p+;”组成,记住最后一个分号不要忘记了!此时处理少量必要的空格是蛮重要的知识点哦。
有人说,不如每句后面加上<br/>,这样四句摆得整整齐齐不更好看了,还讲什么空格的!
那这种情况怎么实现,即使你在句头空了多少格都始终是对齐的:
所以换行后使用 使每句诗头带有缩进
<p id="middle">
白日依山尽,<br/>
黄河入海流.<br/>
欲穷千里目,<br/>
更上一层楼.
</p>
觉得空格不明显,好吧,可以改变空格显示的样式啊:
<span style="font-size:25px"> </span>黄河入海流.<br/>
结果:你会发现空格横向上增大了,当然纵向上诗句的距离也随着字号增大受到了影响。这得看你自己去调节适合自己的样式啦。
那这样吧,高度就不受影响啦,改成:<span style="word-spacing:10px"> </span>黄河入海流.<br/>
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 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
那么写成:
<p id="middle" style="white-space:pre">白日依山尽,<br> 黄河入海流.<br> 欲穷千里目,<br> 更上一层楼.
</p>
就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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<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="点击保留空格" οnclick="changeT()">
</div>
</body>
</html>
点击后出现的效果就是:将句头的空格显示出来啦