不顯示HTML網頁中格式化空白

Question

我有下面的代碼使用CakePHP的幫手

<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>之後呈現空間。

我的解決方法到目前爲止是如下寫蛋糕：

<div id="numberRow"> 
      <span class="current">1</span><span><a href="/posts/show/barter/page:2" class="numbers">2</a></span></div> 

與在同一行<span>結束標記，但打破了格式，使源難以閱讀。

有沒有更好的方法？

Answer 1

好消息！有一個旨在解決這個確切問題的CSS樣式。這就是所謂的white-space-collapse，它看起來像這樣在你的樣式表：

#numberRow {white-space-collapse: discard;} 

在支持它的瀏覽器，這將導致<div>內標籤之間的空白將被丟棄如果沒有他們周圍的任何其它字符。

現在的壞消息還沒有支持它尚未一個瀏覽器。 :(

更快的移動瀏覽器可能會很快支持它 - 我願意打賭它會在Chrome至少在今年年底 - 但是這不會是足夠的支持使值得使用一段時間來。

同時，這是困擾很多網站設計師的通病。

最常見的解決方法是從源代碼中刪除空格，按照您的問題給的例子，它的不理想，但它確實解決了這個問題，並沒有任何凌亂的黑客。

如果你決定保持你的源代碼整潔（或者你根本無法避免它由於你使用的框架，或任何其他），還有幾個hacky解決方案：

首先是使用當頁面加載修剪掉不需要的空間時，可以使用Javascript字符串替換。這很麻煩，但確實有效，除非在極少數情況下用戶禁用了JavaScript。您可能會遇到一些頁面刷新問題，因爲它首先加載一個佈局，然後立即將它自己重新設置爲正確的佈局，但它可能很小（取決於瀏覽器的速度和問題的規模）。

一個更混亂的解決方案，但無疑是一個聰明的黑客，是設置爲font-size:0;父元素（在你的情況下，<div>），然後設置font-size回的內容元素的正確尺寸。例如：

#numberRow {font-size:0;} 
#numberRow>span {font-size:12px;} 

（替換「12px的」與任何大小你碰巧要他們是當然的）

這樣做的缺點是：首先，這是一個可怕的黑客;其次，這是一個可怕的黑客;第三，它可以使你的字體大小難以控制，如果你使用和基於em的大小布局而不是固定的像素大小的字體。但它確實有效。總而言之，我的建議是簡單的回答，並刪除PHP代碼中的空格。至少在大多數人的瀏覽器中都有適當的CSS解決方案之前。

希望有所幫助。

Answer 2

你能不能做到這一點？

<div id="numberRow"><?php echo $this->Paginator->numbers(array('class' => 'numbers', 'separator' => '', 'before' => '', 'after' => '', 'first' => 1, 'last' => 1)); ?></div>