Bagaimana cara memaksakan garis panjang dalam DIV?


417

Oke, ini benar-benar membingungkan saya. Saya memiliki beberapa konten di dalam div seperti:

<div style="background-color: green; width: 200px; height: 300px;">

Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.

</div>

Namun, konten meluap DIV (seperti yang diharapkan) karena 'kata' terlalu panjang.

Bagaimana saya bisa memaksa browser untuk 'memecah' kata di mana diperlukan agar sesuai dengan semua konten di dalamnya?


Jawaban:


610

Menggunakan word-wrap:break-word;

Ia bahkan bekerja di IE6, yang merupakan kejutan yang menyenangkan.


word-wrap: break-wordtelah diganti dengan overflow-wrap: break-word;yang berfungsi di setiap browser modern. IE, sebagai browser yang mati, selamanya akan bergantung pada yang usang dan non-standar word-wrap.

Penggunaan yang ada word-wrapsaat ini masih berfungsi karena merupakan alias untuk overflow-wrapper spesifikasinya.


75
Sebenarnya, kata-bungkus adalah penemuan IE. Jadi tidak mengherankan bahwa ia bekerja di IE :)
Savas Vedova

1
Agar ini berfungsi dalam sebuah tabel, Anda mungkin perlu menerapkannya di table-layout: fixed;atas meja
Serj Sagan

28
word-wrap: break-wordtidak bekerja untuk saya tetapi word-break: break-wordseperti yang disarankan @rahul di bawah ini.
Yves

1
Catatan: Ini hanya akan berfungsi jika Anda memberikannya dalam div induk di IE (Tidak ke span dalam di dalam div).
sms

125

Saya tidak yakin tentang kompatibilitas browser

word-break: break-all;

Anda juga dapat menggunakan <wbr>tag

<wbr>(kata istirahat) berarti: "Browser dapat menyisipkan baris istirahat di sini, jika diinginkan." Kalau peramban tidak berpikir jeda baris yang diperlukan tidak ada yang terjadi.


23
Waspadai kata-break: break-all; akan mematahkan kata-kata di tengah jika masih dapat memuat karakter pada baris dengan kata-kata lain sebelumnya, yang mungkin bukan hasil yang diinginkan, sedangkan kata-wrap: break-word; memindahkan kata-kata ke baris baru dan hanya memecah kata jika terlalu lama untuk cocok pada baris itu sendiri dalam wadah. Contoh: jsfiddle.net/4AKhn/1
alexteg

break-all break semuanya. Oke untuk digunakan dengan kelas tertentu yang memiliki URL panjang dll, tetapi tidak dengan BODY atau P
Upendra

Ini jelas dapat diterima (dan diinginkan) ketika Anda mencoba menampilkan sesuatu seperti URI permintaan dalam sel tabel log, dan membutuhkannya untuk berhenti memecah seluruh tabel dengan sel panjang raksasa. Breaking di tengah 'kata' diinginkan;) Sementara jawaban yang diterima tidak jongkok dalam hal ini.
Luar Biasa

@ Skelly1983 tidak ada yang namanya IE12
TylerH

@ TylerH Saya menyadari hal ini, terima kasih telah menunjukkan ini kepada saya setelah 3 tahun. Ini tercantum pada bagan dukungan browser w3schools untuk tag wbr, yang mencantumkan dukungan sebagai "Internet Explorer / Edge" dan memiliki nomor versi yang terdaftar sebagai 12.0, yang sebenarnya adalah versi pertama Edge.
Skelly1983

98

Ini dapat ditambahkan ke jawaban yang diterima untuk solusi 'lintas-browser'.

Sumber:

.your_element{
    -ms-word-break: break-all;
    word-break: break-all;

 /* Non standard for webkit */
     word-break: break-word;

    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}

Saya mendapatkannya di Chrome / Opera dan Safari, tetapi masih belum mendapatkannya di Firefox dan IE. Dengan ini saya memecahkan Firefox, tetapi IE masih membahas wadah (saya memiliki nama file panjang hanya karakter alfa-numerik).
Kamafeather

1
Halo Kamafather, saya tidak yakin, tetapi jika nama lama Anda benar-benar rusak, seluruh konteks (browser, kode html-css) mungkin membantu untuk membantu Anda lebih jauh. Mungkin, Anda bisa membuat pertanyaan lain dengan situasi Anda.
Milche Patern

Harap perhatikan bahwa ini memecah kata-kata di tempat-tempat yang tidak sesuai tata ruang.

@ user1322720 apa itu tempat "ungrammatical"?
TylerH

31

Saya hanya Googling masalah yang sama, dan memposting solusi terakhir saya DI SINI . Itu juga relevan dengan pertanyaan ini.

Anda dapat melakukan ini dengan mudah dengan div dengan memberikan gaya word-wrap: break-word(dan Anda mungkin perlu mengatur lebarnya juga).

div {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
    width: 100%;
}

Namun, untuk tabel , Anda juga perlu menerapkan: table-layout: fixed. Ini berarti lebar kolom tidak lagi cair, tetapi ditentukan berdasarkan lebar kolom pada baris pertama saja (atau melalui lebar yang ditentukan). Baca lebih lanjut di sini .

Kode sampel:

table {
    table-layout: fixed;
    width: 100%;
}

table td {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
}

1
Terima kasih atas solusi tabel;) Namun, saya tidak begitu mengerti mengapa break-word tidak dapat digunakan dengan tata letak otomatis. Ada saran?
ondObno

@ ACObno Ya saya tidak yakin dengan alasan teknis, tetapi beberapa browser tampaknya berperilaku seperti ini. Mungkin itu karena kata-kata super panjang mengacaukan semua perhitungan yang diperlukan untuk menentukan lebar setiap kolom.
Simon East

Pengaturan width: 100%;adalah satu-satunya cara agar ini berfungsi untuk saya di FF dan chrome!
Putzi San

27

&#8203;adalah entitas HTML untuk karakter unicode yang disebut ruang lebar-nol (ZWSP) yang merupakan karakter tidak terlihat yang menentukan peluang jeda baris. Demikian pula tujuan tanda hubung adalah untuk menentukan peluang jeda baris dalam batas kata.


1
Tip yang sangat bagus! Hanya untuk melengkapi: &#8203;memiliki prioritas lebih rendah daripada ruang putih (yaitu jika ada satu di dekatnya, garis akan pecah di ruang putih sebagai gantinya).
CPHPython

Tampaknya <wbr/>setara dengan unicode yang saya cari
Xenos

20

Menemukan bahwa menggunakan yang berikut ini berfungsi di sebagian besar browser utama (Chrome, IE, Safari iOS / OSX) kecuali Firefox (v50.0.2) ketika menggunakan flexbox dan mengandalkan width: auto.

.your_element {
    word-wrap: break-word;   
    overflow-wrap: break-word;
    word-break: break-word;
}

Catatan: Anda mungkin perlu menambahkan awalan vendor browser jika Anda tidak menggunakan autoprefixer.

Hal lain yang harus diperhatikan adalah penggunaan teks &nbsp;untuk spasi dapat menyebabkan jeda baris tengah kata.


5
Inilah yang saya butuhkan. Solusi lain tidak bekerja dengan lebar: 100%. Satu hal yang perlu diperhatikan: kata-istirahat: istirahat-kata; harus kata-istirahat: istirahat-semua;
jscul

7

CSS word-wrap:break-word; , diuji dalam FireFox 3.6.3



5

Hapus white-space: nowrap, jika ada.

Melaksanakan:

white-space: inherit;
word-break: break-word;

3

Spasi disimpan oleh browser. Teks akan membungkus bila perlu, dan on line istirahat

.pre-wrap {
    white-space: pre-wrap;
    word-break: break-word;
}

DEMO

td {
   word-break: break-word;
   white-space: pre-wrap;
   -moz-white-space: pre-wrap;      
}

table {
    width: 100px;
    border: 1px solid black;
    display: block;
}
<table>
<tr><th>list</th>
<td>
1.longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext
2.breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline
</td>
</tr>
</table>


2

Dari MDN :

The overflow-wrapmenspesifikasikan properti CSS apakah browser harus memasukkan jeda baris dalam kata-kata untuk mencegah teks dari meluap kotak isinya.

Berbeda dengan word-break, overflow-wraphanya akan membuat jeda jika seluruh kata tidak dapat ditempatkan pada barisnya sendiri tanpa meluap.

Jadi Anda bisa menggunakan:

overflow-wrap: break-word;

Bisakah saya menggunakan ?


2

Pertama, Anda harus mengidentifikasi lebar elemen Anda. Misalnya:

#sampleDiv{
  width: 80%;
  word-wrap:break-word;
}
<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

sehingga ketika teks mencapai lebar elemen, itu akan dipecah menjadi beberapa baris.


2

Seperti disebutkan dalam balasan @ davidcondrey, tidak hanya ZWSP, tetapi juga SHY &#173; &shy;yang dapat digunakan dalam kata-kata yang sangat panjang dan terkonstruksi (pikirkan Jerman atau Belanda) yang harus dipatahkan di tempat yang Anda inginkan. Tidak terlihat, tetapi memberikan tanda hubung saat dibutuhkan, sehingga menjaga kedua kata terhubung dan baris terisi sepenuhnya.

Dengan cara itu kata luchthavenpolitieagent dapat dicatat sebagai lucht&shy;haven&shy;politie&shy;agentbagian yang lebih panjang dari suku kata.
Meskipun saya tidak pernah membaca sesuatu yang resmi tentang hal itu, tanda hubung lunak ini berhasil mendapatkan prioritas yang lebih tinggi di browser daripada tanda hubung resmi dalam satu kata konstruksi ( jika mereka memiliki ekstensi untuk itu sama sekali).
Dalam praktiknya, tidak ada peramban yang mampu memecahkan kata yang panjang dan tersusun dengan sendirinya; pada layar yang lebih kecil sehingga menghasilkan baris baru untuk itu, atau dalam beberapa kasus bahkan satu kata-baris (seperti ketika dua dari kata-kata yang dibangun menindaklanjuti).

FYI: Bahasa Belanda untuk petugas polisi bandara


0

kata-istirahat: normal tampaknya lebih baik daripada menggunakan kata-istirahat: kata-istirahat karena istirahat-kata istirahat awal seperti EN

word-break: normal

-3

Melakukan hal ini:

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

#sampleDiv{
   overflow-wrap: break-word;
}

-4

coba saja ini dengan gaya kami

white-space: normal;

1
Jawaban duplikat di beberapa pertanyaan tidak disukai dalam kebanyakan kasus. Dalam hal ini, sepertinya jawaban yang salah untuk kedua pertanyaan. normaladalah nilai default white-space. Saya pikir menambahkan itu tidak akan berpengaruh pada contoh dalam pertanyaan. Harap perbaiki saya jika saya salah.
Jeremy Banks

Itu tergantung pada override yang dibuat oleh CSS. Pada kasus saya, saya harus mendeklarasikan ulang pada "style" di komponen JSF saya untuk mengganti style CSS default yang bukan "white-space: normal;"
Benjamin Fuentes
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.