So verschieben Sie den Text <p> nach unten statt außerhalb des Div

Question

Hallo, ich habe ein Problem mit meinem Kartenschieberegler.

Das Tag bewegt sich ständig außerhalb des Bereichs, aber ich möchte, dass es nach unten rutscht, damit es in die lange Beschreibung passt. Der gesamte Text , wie mache ich das?

Wenn Sie sehen, dass bei der Verwendung von Langtext der Text außerhalb des Trennzeichens landet, ich aber möchte, dass er innerhalb bleibt

Ich habe versucht, word-wrap: break-word; zu verwenden, aber es hat bei mir nicht funktioniert

div.scroll-container {
  Hintergrundfarbe: #7289da;
  Leerraum: nowrap;
  Polsterung: 10px;
  overflow-x: scrollen;
    overflow-y: versteckt;
    -webkit-overflow-scrolling: touch;
}

  .card {
    float: keine;
    Anzeige: Inline-Block;
    Zoom: 1;
  Polsterung: 10px;
  Breite: 375px;
  Höhe: 525px;
}

.container {
  Polsterung: 2px 16px;
    Hintergrundfarbe: #fff;
  Farbe: #000;
Höhe: 200px;
}

  .container p {
    Farbe: #000;
    Schriftgröße: 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>Architekt & Ingenieurjifnnjknhbgvfdfcgvhbjnkmmnbgvfd</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>Architekt und Ingenieur</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>Architekt und Ingenieur</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>Architekt und Ingenieur</p>
  </div>
</div>
</div>

Answer 1

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

Answer 2

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>