爲什麼空間會影響使用空白的風格，以及如何解決這個問題？

在此示例爲什麼空間會影響使用空白的風格，以及如何解決這個問題？

<html> 
<head> 
    <style> 
     .q_show_spaces { 
      white-space: pre-wrap; 
    } 

    .q_inline { 
     display: inline; 
    } 

    .q_no_wrap { 
     white-space: pre; 
    } 
</style> 
</head> 

<body> 
<div style="width:400px;border:solid 1px"> 
    <div class="q_show_spaces"><div class="q_inline">To testaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div><div class="q_inline q_no_wrap"><div class="q_inline">aaaaaaaaaaaaaaaaaaaaaa aaaaaaabbb, </div></div><div class="q_inline">by like terms</div></div> 
</div> 

<br /> 
<br /> 

<div style="width:400px;border:solid 1px"> 
    <div class="q_show_spaces"><div class="q_inline">To testaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div><div class="q_inline q_no_wrap"><div class="q_inline">aaaaaaaaaaaaaaaaaaaaaa aaaaaaabbb,</div></div><div class="q_inline"> by like terms</div></div> 
</div> 

</body> 
</html>

在第一示例中，內容是要在div之外，但在第二個例子中的內容如預期的，唯一的變化是空間移出的div。

如何解決這個問題？我不想移動外部空間，也不想移除div上的任何div或樣式。建議任何可以覆蓋這些並正確工作的新風格。

對不正確的HTML格式。

來源

2014-02-11 madhu_p

看來您在尋找word-break: break-all css屬性。

應用像這樣在你的CSS：

.q_show_spaces { 
    white-space: pre-wrap; 
    word-break: break-all; /* or break-work, if you planning to break a word */ 
}

Working Fiddle

MDN Article

來源

2014-02-11 14:51:44

貌似完美的，這是我所期待的。 –

@madhu_p如果它回答你的問題，請將其標記爲答案。 –

感謝您的修復，但仍然沒有解決， –

爲什麼空間會影響使用空白的風格，以及如何解決這個問題？

回答

相關問題