如何使<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></pre>
<p><br /></p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
这是因为您在
.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>