Comment faire descendre le texte <p> au lieu de l'extérieur du div

Question

Bonjour, j'ai un problème avec le curseur de ma carte,

la balise continue de sortir des limites mais je souhaite qu'elle glisse vers le bas pour s'adapter à la longue description. L'intégralité du texte , comment je fais ça?

Si vous voyez quand j'utilise un texte long, le texte se retrouve en dehors du délimiteur, mais je veux qu'il reste à l'intérieur

J'ai essayé d'utiliser word-wrap: break-word; mais cela n'a pas fonctionné pour moi

div.scroll-container {
  couleur d'arrière-plan : #7289da ;
  espace blanc : nowrap ;
  remplissage : 10 px ;
  overflow-x : défilement ;
    overflow-y : caché ;
    -webkit-overflow-scrolling : toucher ;
}

  .carte {
    flotteur : aucun ;
    affichage : bloc en ligne ;
    zoom : 1 ;
  remplissage : 10 px ;
  largeur : 375 px ;
  hauteur : 525px ;
}

.récipient {
  remplissage : 2px 16px ;
    couleur d'arrière-plan : #fff ;
  couleur : #000 ;
hauteur : 200px ;
}

  .conteneur p {
    couleur : #000 ;
    taille de police : 20 px ;
  }

    

  
  

    
John Doe
    
Architecte et ingénieurnjifnnjknhbgvfdfcgvhbjnkmmnbgvfd
  


    

  
  

    
John Doe
    
Architecte et Ingénieur
  


    

  
  

    
John Doe
    
Architecte et Ingénieur
  

    

  
  

    
John Doe
    
Architecte et Ingénieur
  



            

Answer 1

C'est parce que vous êtes dans .scrollable 父元素上使用了 white-space: nowrap;。如果您去掉这个设置，并在 .card 上设置 word-break: break-word; et que votre texte s'enroulera correctement.

Cependant, cela cassera votre mise en page, puisque vous comptez évidemment sur nowrap pour insérer plusieurs éléments dans la même ligne.

Essayez d'utiliser la disposition flexbox. C'est plus simple et nécessite moins de code.

.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

Propriété CSSwhite-space: nowrap在div.scroll-containerEmpêche les espaces de s'enrouler. Mozilla a une démo demo de cette propriété CSS.

Une solution possible est pour vous container类明确地将其设置回normal.

Étant donné que votre contenu factice contient un mot assez long, il débordera quand même. Ce problème peut également être résolu en container类上使用word-wrap: break-word;.

Edit : Comme l'a souligné @j08691 dans les commentaires :

Voici la partie mise à jour du code :

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>