考慮以下標記
<div>
<p> text here</p>
</div>
當文本的長度較小，不存在問題。
當文本長度變得更多時，我可以使用white-space: nowrapCSS 屬性在 div 外顯示文本。
但是，當文本變得很大時，文本的某些部分會隨著它移出視口而被隱藏。當它溢位整個視口而不是父 div 元素的大小時，有沒有辦法可以在第二行顯示它。
uj5u.com熱心網友回復：
如果您在 div 中的文本周圍放置一個內部 div，您可以強制其寬度為 100vw 并將其空白設定為正常。
在這個片段中，“原始”（外部）div 被賦予粉紅色背景，因此您可以看到它的邊界。
div.outer {
white-space: nowrap;
width: 50%;
background-color: pink;
}
div.inner {
width: 100vw;
white-space: normal;
}<div class="outer">
<div class="inner">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</div>額外的（內部）元素放在那里處理一般情況。您也許可以使用 p 元素而不是 div.inner - 這取決于是否有其他文本，例如在您的特定設定中的內部元素之外。
uj5u.com熱心網友回復：
嘗試溢位包裝：斷字；或斷字：斷斷續續；
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/344728.html
上一篇：如何創建這樣的CSS網格布局？