HTML顯示跨越，因爲一個空白換行的不同

爲什麼會HTML顯示跨越，因爲一個空白換行的不同

<div id='dD' class='cs'> 
    <p class='c cB'> 
     <span>X</span> 
     <span>X</span> 
    </p> 
</div>

顯示這樣

在Chrome，Firefox，歌劇

，Safari瀏覽器

但這

<div id='dD' class='cs'> 
    <p class='c cB'> 
     <span>X</span><span>X</span> 
    </p> 
</div>

個

顯示這樣

我不希望一個空格換行符，在途中HTML任何影響呈現。

我可以通過應用

display: block;

或

display: inline-block;

的跨度（不知道哪個是更好的選擇）

糾正這一點，但不明白爲什麼瀏覽器渲染換句話說，由於空白換行符。

來源

2016-07-30 GRW

我很確定空白不是問題。你可以在一個片段或jsfiddle中重新創建兩個場景嗎？很有可能你的代碼中有一些其他的CSS無意中導致了這種效果。 – Noel

我從字面上只切出了之間的空白 – GRW

發現這個：http://stackoverflow.com/questions/24131815/newline-is-being-printed-as-a-whitespace-in-text-area-of -html-how-do-i-resolve，瀏覽器真的把換行符當作空格嗎？！這可能會有潛在的戲劇性效果。可能需要檢查我的所有html。 – GRW

顯然，默認行爲是把新行作爲空間。

這一個空間足以將文本包裝在寬度之外並在單獨的行上呈現。

刪除換行刪除了空格，以便X在同一行上呈現。

添加

.c span { 
    display: block; 
}

力每個X被當作一個塊，並呈現在單獨的行，這是我想要的。

來源

2016-07-30 02:38:42 GRW

試試這個

.cB { 
    word-wrap: break-word; 
}

來源

2016-07-30 02:27:21

不起作用。我確實希望文字包裝，所以nowrap不會是我的解決方案。 – GRW

對不起，我編輯了我的答案 –

如果我有 XX，但是我特別希望每個X都在它自己的中，並且它不適用於那種情況 – GRW

HTML顯示跨越，因爲一個空白換行的不同

回答

相關問題