Cara membuat teks <p> bergerak ke bawah dan bukannya di luar div

Question

Hai, saya menghadapi masalah dengan peluncur kad saya,

teg itu terus keluar dari sempadan tetapi saya mahu ia meluncur ke bawah agar sesuai dengan penerangan yang panjang Keseluruhan teks , bagaimana saya boleh melakukannya?

Jika anda melihat apabila saya menggunakan teks panjang, teks berakhir di luar pembatas, tetapi saya mahu ia kekal di dalam

Saya cuba menggunakan word-wrap: break-word; tetapi ia tidak berkesan untuk saya

div.scroll-container {
  warna latar belakang: #7289da;
  white-space: nowrap;
  padding: 10px;
  limpahan-x: tatal;
    limpahan-y: tersembunyi;
    -webkit-overflow-scrolling: sentuh;
}

  .card {
    terapung: tiada;
    paparan: inline-block;
    zum: 1;
  padding: 10px;
  lebar: 375px;
  ketinggian: 525px;
}

.bekas {
  padding: 2px 16px;
    warna latar belakang: #fff;
  warna: #000;
ketinggian: 200px;
}

  .bekas p {
    warna: #000;
    saiz fon: 20px;
  }

    

  
  

    
John Doe
    
Arkitek & Juruteranjifnnjknhbgvfdfcgvhbjnkmmnbgvfd
  


    

  
  

    
John Doe
    
Arkitek &Jurutera
  


    

  
  

    
John Doe
    
Arkitek &Jurutera
  

    

  
  

    
John Doe
    
Arkitek &Jurutera
  

Answer 1

Ini kerana anda berada dalam .scrollable 父元素上使用了 white-space: nowrap;。如果您去掉这个设置，并在 .card 上设置 word-break: break-word; dan teks anda akan dibalut dengan betul.

Walau bagaimanapun, ini akan merosakkan reka letak anda, kerana anda jelas bergantung pada nowrap untuk memuatkan berbilang elemen ke dalam baris yang sama.

Cuba gunakan susun atur flexbox. Ia lebih mudah dan memerlukan kurang kod.

.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 propertywhite-space: nowrap在div.scroll-containerElakkan ruang daripada membalut. Mozilla mempunyai demo demo sifat CSS ini.

Perbaikan yang mungkin adalah untuk anda container类明确地将其设置回normal.

Memandangkan kandungan dummy anda mempunyai perkataan yang agak panjang, ia masih akan melimpah. Masalah ini juga boleh diselesaikan dalam container类上使用word-wrap: break-word;.

Sunting: Seperti yang ditunjukkan oleh @j08691 dalam ulasan:

Ini ialah bahagian kod yang dikemas kini:

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>