Bisakah saya mencegah teks dalam blok div agar tidak meluap?

132

html css overflow

— Clement Herreman
sumber

1

mengapa teks Anda meluap?

— Virat Kadaru

3

@ViratKadaru ... karena 360pt Gregorian Chant Serif

— DukeDidntNukeEm

163

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.

— Amalgovinus
sumber

3

https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap

— Dangerous

Pengguna perlu memeriksa ini sebagai jawabannya. Ini bekerja untuk saya hari ini! Terima kasih sobat!

— Eduardo A. Fernández Díaz

oh ya ampun terima kasih banyak untuk yang ini, saya benar-benar sudah gila bc dari beberapa masalah yang bisa saya pecahkan dengan jawaban Anda !! XD

— Sven

77

Anda dapat mencoba:

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

#myDiv {
    overflow:hidden;
}

Lihat dokumen untuk properti overflow untuk informasi lebih lanjut.

— brettkelly
sumber

34

Itu bukan "dokumen", itu situs web dengan beberapa informasi dasar tentang HTML / CSS. Docs ada di w3.org

— DisgruntledGoat

47

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

— Mara Jimenez
sumber

18

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.

— Timothée Martin
sumber

15

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 */

— Pmpr
sumber

11

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; 

}

— Sachin
sumber

1

Ini sangat membantu dalam kombinasi dengan overflow: hidden;

— koppor

6

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/

— edward
sumber

4

overflow: scroll? Atau otomatis. dalam atribut style.

— kacang
sumber

2

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;
}

— Ronit Oommen
sumber

1

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.

— Pak David dari Lee
sumber

1

Anda bisa mengatur min-width di css, misalnya:

.someClass{min-width: 980px;}

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

— Damir Olejar
sumber

1

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>

— Gene
sumber

1

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

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

— Kirtan
sumber

dalam teks multibahasa selain, itu menyebabkan beberapa karakter kata panjang disembunyikan dari tampilan.

— Bhupi

0

!! 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.

&shy;

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>

Luaskan cuplikan

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

— janDo
sumber