如何使<p>文字向下移動，而不是超出div
P粉461599845
2023-08-17 18:58:37
<p>你好，我有一個關於我的卡片滑塊的問題，<code><p></code>標籤一直超出了邊界，但我希望它向下滑動以適應長描述的整個文本，我該怎麼做呢？ </p>
<p>如果你看到當我使用長文本時，文字最後會超出分隔符，但我希望它保持在內部</p>
<p>我嘗試使用<code>word-wrap: break-word;</code>，但對我來說沒有起作用</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">div.scroll-container {
background-color: #7289da;
white-space: nowrap;
padding: 10px;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.card {
float: none;
display: inline-block;
zoom: 1;
padding: 10px;
width: 375px;
height: 525px;
}
.container {
padding: 2px 16px;
background-color: #fff;
color: #000;
height: 200px;
}
.container p {
color: #000;
font-size: 20px;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="scroll-container" id="cardslist">
<div class="card">
<img src="icon.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineernjifnnjknhbgvfdfcgvhbjnkmmnbgvfd</p>
</div>
</div>
<div class="card">
<img src="icon.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
<div class="card">
<img src="icon.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
<div class="card">
<img src="icon.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
</div></前>
<p><br />></p>
這是因為您在
.scrollable父元素上使用了white-space: nowrap;。如果您去掉這個設置，並在.card上設定word-break: break-word;，您的文字將正確換行。然而，這會破壞您的佈局，因為您顯然依賴
nowrap來使多個元素適應同一行。嘗試使用 flexbox 佈局。它更簡單，需要的程式碼更少。
.scroll-container { background-color: #7289da; padding: 10px; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; /*Flexbox setup!*/ display: flex; } .card { /*float: none; display: inline-block; zoom: 1; height: 525px;*/ padding: 10px; width: 375px; /* Added */ flex-shrink: 0; word-break: break-word; } .container { padding: 2px 16px; background-color: #fff; color: #000; height: 200px; } .container p { color: #000; font-size: 20px; }<div class="scroll-container" id="cardslist"> <div class="card"> <img src="icon.png" alt="Avatar" style="width:100%"> <div class="container"> <h4><b>John Doe</b></h4> <p>Architect & Engineernjifnnjknhbgvfdfcgvhbjnkmmnbgvfd</p> </div> </div> <div class="card"> <img src="icon.png" alt="Avatar" style="width:100%"> <div class="container"> <h4><b>John Doe</b></h4> <p>Architect & Engineer</p> </div> </div> <div class="card"> <img src="icon.png" alt="Avatar" style="width:100%"> <div class="container"> <h4><b>John Doe</b></h4> <p>Architect & Engineer</p> </div> </div> <div class="card"> <img src="icon.png" alt="Avatar" style="width:100%"> <div class="container"> <h4><b>John Doe</b></h4> <p>Architect & Engineer</p> </div> </div> </div>CSS屬性
white-space: nowrap在div.scroll-container上防止空格換行。 Mozilla有一個關於該CSS屬性的示範demo。一個可能的修復方法是為您的
container類別明確地將其設定回normal。由於您的虛擬內容有一個相當長的單詞，它仍然會溢出。 在
container類別上使用word-wrap: break-word;也可以解決這個問題。編輯：如評論中@j08691所指出的：
這是更新部分的程式碼：
div.scroll-container { background-color: #7289da; white-space: nowrap; padding: 10px; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .card { float: none; display: inline-block; zoom: 1; padding: 10px; width: 375px; height: 525px; vertical-align: top; } .container { white-space: normal; word-wrap: break-word; padding: 2px 16px; background-color: #fff; color: #000; height: 200px; } .container p { color: #000; font-size: 20px; }<div class="scroll-container" id="cardslist"> <div class="card"> <img src="icon.png" alt="Avatar" style="width:100%"> <div class="container"> <h4><b>John Doe</b></h4> <p>Architect & Engineernjifnnjknhbgvfdfcgvhbjnkmmnbgvfd</p> </div> </div> <div class="card"> <img src="icon.png" alt="Avatar" style="width:100%"> <div class="container"> <h4><b>John Doe</b></h4> <p>Architect & Engineer</p> </div> </div> <div class="card"> <img src="icon.png" alt="Avatar" style="width:100%"> <div class="container"> <h4><b>John Doe</b></h4> <p>Architect & Engineer</p> </div> </div> <div class="card"> <img src="icon.png" alt="Avatar" style="width:100%"> <div class="container"> <h4><b>John Doe</b></h4> <p>Architect & Engineer</p> </div> </div> </div>