不要在网页中呈现html格式的空格 [英] Do not render html formatting whitespace in the webpage
问题描述
我有以下代码使用cakephp的助手生成一些跨度
I have the following code to generate some spans using cakephp's helper
<div id="numberRow">
<?php echo $this->Paginator->numbers(array('class' => 'numbers', 'separator' => '', 'before' => '', 'after' => '', 'first' => 1, 'last' => 1)); ?>
</div>
这会生成以下代码：
<div id="numberRow">
<span class="current">1</span><span><a href="/posts/show/barter/page:2" class="numbers">2</a></span>
</div>
问题是浏览器在< span>
The problem is that the browser renders a space after the <span> which I do not want.
我的解决方案到目前为止是这样写的：
My solution so far is to write the cake as follows:
<div id="numberRow">
<span class="current">1</span><span><a href="/posts/show/barter/page:2" class="numbers">2</a></span></div>
但是分隔了格式，使得源代码难以阅读。
with the closing tag on the same row as the <span> but that breaks up the format and makes the source harder to read.
有更好的方法吗？
推荐答案
好消息！有一个CSS样式，旨在解决这个确切的问题。它被称为 white-space-collapse ，它在你的样式表中如下：
Good news! There is a CSS style which is aimed at solving this exact problem. It's called white-space-collapse, and it looks like this in your stylesheet:
#numberRow {white-space-collapse: discard;}
，如果没有其他字符，< div> 中的标签之间的空格将被删除。
In browsers which support it, this will cause white space between tags within the <div> to be dropped if there aren't any other characters around them.
现在的坏消息...没有一个单一的浏览器支持它。 ：（
Now for the bad news... there isn't a single browser which supports it yet. :(
快速移动的浏览器很可能会支持它 - 我愿意打赌，至少在年底之前， - 但是这不会是足够的支持，使它值得使用一段时间。
The faster moving browsers will probably support it very soon -- I'd be willing to bet it'll be in Chrome at least by the end of the year -- but that's not going to be enough support to make it worth using for some time to come.
同时，这是一个常见的问题，困扰了很多网站设计师。
In the meanwhile, this is a common problem which plagues a lot of site designers.
最常见的解决方案是简单地从你的源代码中删除空格，根据你在问题中给出的例子。它不理想，但它
The most common solution is simply to remove the white spaces from your source code, as per the example you gave in the question. Its not ideal, but it does solve the problem, and without any messy hacks.
如果你决定保持你的源代码整洁（或者你根本不能避免它的框架你正在使用，或者什么），还有一些更黑客的解决方案：
If you're determined to keep your source code tidy (or you simply can't avoid it due to a framework you're using, or whatever), there are a few more hacky solutions:
首先是使用一个Javascript字符串替换，当页面加载修剪出不需要的空格。这是凌乱，但除了在用户已禁用javascript的罕见的情况下工作，你可能会得到一些页面刷新问题，因为它首先加载一个布局，然后立即重新同步到正确的布局，但它会可能是最小的（取决于浏览器的速度和问题的规模）。
First is to use a Javascript string replacement when the page loads to trim out the unwanted spaces. This is messy, but does work, except in the rare occasion when the user has disabled javascript. You may get some page refresh problems as it loads first with the one layout and then immediately resyncs itself to the correct layout, but it'll probably be minimal (depending on the browser speed and the scale of the problem).
一个更疯狂的解决方案，但毫无疑问是一个聪明的黑客，是设置<$ c $对于父元素（在您的情况下，< div> ），请设置
An even messier solution, but undoubtedly a clever hack, is to set font-size:0; for the parent element (in your case, the <div>), and then set font-size back to the correct size for the content elements. eg:
#numberRow {font-size:0;}
#numberRow>span {font-size:12px;}
（当然，用你想要的大小替换'12px'
(replacing '12px' with whatever size you happen to want them to be, of course)
这样做的缺点是：首先，这是一个可怕的黑客;其次，这是一个可怕的黑客;第三，如果您使用基于em的大小布局而不是固定像素大小的字体，它可能会使您的字体大小难以控制。但它确实有效。
The disadvantages of this are: Firstly, it's a horrible hack; secondly, it's a horrible hack; and thirdly, it can make your font sizing difficult to control if you're using and em-based size layout rather than fixed pixel sized fonts. But it does work.
总而言之，我的建议是使用简单的答案，并删除PHP代码中的空格。至少在大多数人的浏览器中都有合适的CSS解决方案之前。
All in all, my recommendation is to go with the easy answer, and remove the spaces in your PHP code. At least until the proper CSS solution is in place in most people's browsers.
希望有帮助。
这篇关于不要在网页中呈现html格式的空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
