Bisakah saya mencegah teks dalam blok div agar tidak meluap?

Bisakah saya mencegah teks dalam blok div agar tidak meluap?

Jika Anda ingin teks yang meluap di div untuk baris baru secara otomatis alih-alih disembunyikan atau membuat bilah gulir, gunakan

word-wrap: break-word

Properti.

Anda dapat mencoba:

<div id="myDiv">
    stuff 
</div>

#myDiv {
    overflow:hidden;
}

Lihat dokumen untuk properti overflow untuk informasi lebih lanjut.

Anda dapat menggunakan properti CSS teks-overflow untuk memotong teks panjang.

<div id="greetings">
  Hello universe!
</div>

#greetings
{
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; // This is where the magic happens
}

referensi: http://makandracards.com/makandra/5883-use-css-text-overflow-to-truncate-long-texts

Anda dapat mengontrolnya dengan CSS, ada beberapa opsi:

• tersembunyi -> Semua teks yang meluap akan disembunyikan.
• terlihat -> Biarkan teks meluap terlihat.
• gulir -> letakkan bilah gulir jika teks meluap

Semoga ini bisa membantu.

Cukup gunakan ini:

white-space: pre-wrap;      /* CSS3 */   
white-space: -moz-pre-wrap; /* Firefox */    
white-space: -pre-wrap;     /* Opera <7 */   
white-space: -o-pre-wrap;   /* Opera 7 */    
word-wrap: break-word;      /* IE */

ada properti css lain:

white-space : normal;

Properti white-space mengontrol bagaimana teks ditangani pada elemen yang diterapkannya.

div {

  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 

}

Coba tambahkan kelas ini untuk memperbaiki masalah:

.ellipsis {
  text-overflow: ellipsis;

  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}

Dijelaskan lebih lanjut dalam tautan ini http://css-tricks.com/almanac/properties/t/text-overflow/

overflow: scroll? Atau otomatis. dalam atribut style.

Saya kira Anda harus mulai dengan dasar-dasar dari w3

https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

div {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

Jika div Anda memiliki ketinggian yang ditetapkan dalam css yang akan menyebabkannya meluap di luar div.

Anda bisa memberikan ketinggian minimum pada div jika Anda perlu membuatnya menjadi ketinggian minimum pada div setiap saat.

Min-height tidak akan bekerja di IE6, jika Anda memiliki stylesheet khusus IE6, Anda dapat memberikan tinggi reguler untuk IE6. Perubahan tinggi dalam IE6 sesuai dengan konten di dalamnya.

Anda bisa mengatur min-width di css, misalnya:

.someClass{min-width: 980px;}

Itu tidak akan pecah, namun Anda masih memiliki scroll-bar untuk ditangani.

Saran cara menangkap bagian CSS Anda yang menyebabkan masalah:

1) atur style="height:auto;"semua <div>elemen dan coba lagi.

2) Atur style="border: 3px solid red;"semua <div>elemen untuk melihat seberapa luas area yang digunakan <div>kotak Anda.

3) Singkirkan semua height:#px;properti css dari CSS Anda dan mulai lagi dari awal.

Jadi misalnya:

<div id="I" style="height:auto;border: 3px solid red;">I
    <div id="A" style="height:auto;border: 3px solid purple;">A
        <div id="1A" style="height:auto;border: 3px solid green;">1A
        </div>
        <div id="2A" style="height:auto;border: 3px solid green;">2A
        </div>
    </div>
    <div id="B" style="height:auto;border: 3px solid purple;">B
        <div id="1B" style="height:auto;border: 3px solid green;">1B
        </div>
        <div id="2B" style="height:auto;border: 3px solid green;">2B
        </div>
    </div>
</div>

.NonOverflow {
    width: 200px; /* Need the width for this to work */
    overflow: hidden;
}

<div class="NonOverflow">
    Long Text
</div>

!! Tradeoff berkode keras di depan !! Bergantung pada kode di sekitarnya dan resolusi layar, ini dapat menyebabkan perilaku berbeda / tidak diinginkan

Jika hidden overflow keluar dari pertanyaan dan tanda hubung yang benar diperlukan, Anda dapat menggunakan entitas HTML tanda hubung lunak tempat Anda ingin kata / teks tersebut dihancurkan. Dengan cara ini Anda dapat menentukan titik awal secara manual.

­

Tanda hubung hanya akan muncul ketika kata perlu istirahat untuk tidak meluap wadah sekitarnya.

Contoh:

<div class="container">
  foo&shy;bar
</div>

Hasil jika wadah cukup lebar dan teks tidak akan meluap wadah:

foobar

Hasil jika wadah menjadi kecil dan teks akan benar-benar meluap wadah:

foo-
bar

.container{
  background-color: green;
  max-width: 30px;
}

Example 1 - container to small => text overflows container:

<div class="container">
  foobar
</div>

Example 2 - using soft hyphen => text breaks at predetermined break point:

<div class="container">
  foo&shy;bar
</div>

Example 3 - using soft hyphen => text still overflowing because the text before the soft hyphen is to long:

<div class="container">
  foobar&shy;foo
</div>

Informasi lebih lanjut: https://en.wikipedia.org/wiki/Soft_hyphen