瀏覽器顯示儘管最大寬度爲長文本的滾動條

爲什麼此HTML會導致滾動條出現？瀏覽器顯示儘管最大寬度爲長文本的滾動條

<div style="width: 200px; max-width: 200px; background-color: lightblue;"> 
 
verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_ 
 
</div>

我想這應該不是因爲我指定的最大寬度。我預計有沒有包裝，但也沒有滾動條，因爲div的最終寬度是200px。

我不能使用overflow: hidden;，因爲我的網站實際上使用相對定位在其包含元素之外的渲染窗口部件。

如何包含該文本或至少防止滾動條出現？將該文本呈現在父級之外是可以接受的。

來源

2017-06-28 boot4life

爲什麼不用z-index推後面的小部件？ –

使用word-wrap: break-word;因爲文本之間沒有空格，所以它不會在新的斷線之後，它會忽略max-width

<div style="width: 200px; max-width: 200px;word-wrap: break-word; background-color: lightblue;"> 
 
verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_ 
 
</div>

來源

2017-06-28 13:06:15

有沒有辦法讓它保持原樣？我也懷疑*爲什麼會出現這種情況。 – boot4life

它發生的原因是默認的換行是在空間上打破。由於沒有空白，所以文字不會被破壞。如果沒有中斷，那麼瀏覽器將添加一個滾動條。 – Allan

如果字符之間沒有空格，HTML將把它當作單個單詞，並且它不會在新/下一行中將其分開。 –

<div style="width: 200px; max-width: 200px; background-color: lightblue;"> 
 
verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_ verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_ 
 
</div>

來源

2017-06-28 13:17:08 tnbsoftlab

瀏覽器認爲你的句子只有一個單詞，他們不切詞，然後他們產生automaticaly ** margin-right **，在片段結果變化，因爲我把空間放在文本**（單詞之間的空間）**即使你使用引導網格，您將獲得相同的結果 – tnbsoftlab

爲什麼寬度設置不需要？ – boot4life

這不是必須的，因爲在這種情況下，優先級是瀏覽器使用的設備寬度，除非你減少** font-size **你也可以用css屬性來解決這個問題** word-wrap：break-word **指[word-break]（https://developer.mozilla.org/fr/docs/Web/CSS/word-break）瞭解更多信息，我希望能夠爲您提供幫助 – tnbsoftlab

瀏覽器顯示儘管最大寬度爲長文本的滾動條

回答

相關問題