搜索

首页  >  问答  >  正文

如何使<p>文本向下移动,而不是超出div

<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>
P粉461599845P粉461599845524 天前563

全部回复(2)我来回复

  • P粉448346289

    P粉4483462892023-08-18 17:02:40

    这是因为您在 .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>

    回复
    0
  • P粉769045426

    P粉7690454262023-08-18 12:16:17

    CSS属性white-space: nowrapdiv.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>

    回复
    0
  • 取消回复