Sejak beralih dari TABLE-layout ke DIV-layout, satu masalah umum tetap:
MASALAH : Anda mengisi DIV Anda dengan teks dinamis dan mau tidak mau ada kata yang sangat panjang yang meluas ke tepi kolom div Anda dan membuat situs Anda terlihat tidak profesional.
RETRO-WHINING : Ini tidak pernah terjadi dengan tata letak meja. Sel tabel akan selalu berkembang dengan baik ke lebar kata terpanjang.
SEVERITY : Saya melihat masalah ini bahkan pada situs-situs paling utama, terutama di situs-situs Jerman di mana bahkan kata-kata umum seperti "batas kecepatan" sangat panjang ("Geschwindigkeitsbegrenzung").
Adakah yang punya solusi yang bisa diterapkan untuk ini?
Jawaban:
Tanda hubung lembut
Anda dapat memberi tahu browser tempat memisahkan kata-kata panjang dengan memasukkan tanda hubung lunak (
­
):dapat diterjemahkan sebagai
atau
Ekspresi reguler yang bagus dapat memastikan Anda tidak akan memasukkannya kecuali perlu:
Browser dan mesin pencari cukup pintar untuk mengabaikan karakter ini saat mencari teks, dan Chrome dan Firefox (belum menguji orang lain) mengabaikannya saat menyalin teks ke clipboard.
<wbr>
elemenPilihan lain adalah menyuntikkan
<wbr>
, mantan IE-isme , yang sekarang dalam HTML5 :Putus tanpa tanda hubung:
Anda dapat mencapai hal yang sama dengan karakter spasi nol-lebar
​
(atau​
).FYI ada juga CSS yang
hyphens: auto
didukung oleh IE, Firefox dan Safari terbaru ( tetapi saat ini bukan Chrome ):Namun hyphenation itu didasarkan pada kamus hyphenation dan itu tidak dijamin akan memecah kata-kata panjang. Ini dapat membuat teks yang dibenarkan lebih cantik.
Solusi rengekan retro
<table>
untuk tata letak buruk, tetapidisplay:table
pada elemen lain baik-baik saja. Ini akan sama aneh (dan melar) dengan tabel old-school:overflow
danwhite-space: pre-wrap
jawaban di bawah juga bagus.sumber
Dua perbaikan:
overflow:scroll
- ini memastikan konten Anda dapat dilihat dengan biaya desain (scrollbar jelek)overflow:hidden
- Hanya memotong luapan. Itu berarti orang tidak dapat membaca kontennya.Jika (dalam contoh SO) Anda ingin menghentikannya tumpang tindih padding, Anda mungkin harus membuat div lain, di dalam padding, untuk menahan konten Anda.
Sunting: Seperti jawaban lainnya menyatakan, ada berbagai metode untuk memotong kata-kata, baik itu mengerjakan lebar render pada sisi klien (jangan pernah mencoba melakukan sisi-server ini karena tidak akan pernah dapat bekerja dengan andal, lintas platform) melalui JS dan menyisipkan break-karakter, atau menggunakan tag CSS yang tidak standar dan / atau sangat tidak kompatibel (
word-wrap: break-word
tampaknya tidak berfungsi di Firefox ).Anda akan selalu membutuhkan deskriptor melimpah. Jika div Anda mengandung konten tipe blok yang terlalu lebar (gambar, tabel, dll), Anda perlu overflow agar tidak merusak tata letak / desain.
Jadi, dengan segala cara, gunakan metode lain (atau kombinasi dari keduanya) tetapi ingat untuk menambahkan overflow juga sehingga Anda dapat menutupi semua browser.
Sunting 2 (untuk membahas komentar Anda di bawah):
Mulai menggunakan
overflow
properti CSS tidak sempurna tetapi berhenti merusak desain. Lamaroverflow:hidden
dulu. Ingatlah bahwa overflow mungkin tidak merusak padding sehingga sarangdiv
atau menggunakan perbatasan (apa pun yang terbaik untuk Anda).Ini akan menyembunyikan konten yang meluap dan karenanya Anda mungkin kehilangan makna. Anda bisa menggunakan scrollbar (menggunakan
overflow:auto
atauoverflow:scroll
bukannyaoverflow:hidden
) tetapi tergantung pada dimensi div, dan desain Anda, ini mungkin tidak terlihat atau tidak berfungsi dengan baik.Untuk memperbaikinya, kita dapat menggunakan JS untuk menarik sesuatu dan melakukan beberapa bentuk pemotongan otomatis. Saya setengah jalan menulis beberapa kode pseudo untuk Anda tetapi itu menjadi sangat rumit setengah jalan melalui. Jika Anda perlu menunjukkan sebanyak mungkin, berikan tanda hubung pada ( seperti yang disebutkan di bawah ).
Perlu diketahui bahwa ini harus dibayar dengan biaya CPU pengguna. Ini dapat menyebabkan halaman membutuhkan waktu lama untuk memuat dan / atau mengubah ukuran.
sumber
overflow: scroll;
seandainya konten berisi informasi yang bermanfaat. Dan kemudian tujuan selanjutnya adalah mencoba membuat CSS sedemikian rupa sehingga bilah gulir tidak akan muncul. Dan jika mereka melakukannya, Anda selalu memiliki scroll bar sebagai cadangan.text-overflow: ellipsis
stackoverflow.com/a/22811590/759452Ini adalah masalah yang kompleks, seperti yang kita ketahui, dan tidak didukung dengan cara apa pun yang umum di antara peramban. Sebagian besar browser sama sekali tidak mendukung fitur ini.
Dalam beberapa pekerjaan yang dilakukan dengan email HTML, di mana konten pengguna sedang digunakan, tetapi skrip tidak tersedia (dan bahkan CSS tidak didukung dengan sangat baik), bit CSS berikut ini dalam pembungkus di sekitar blok konten yang tidak Anda pasang setidaknya harus membantu:
Dalam kasus browser berbasis Mozilla, file XBL yang disebutkan di atas mengandung:
Sayangnya, Opera 8+ sepertinya tidak menyukai salah satu dari solusi di atas, jadi JavaScript harus menjadi solusi untuk browser tersebut (seperti Mozilla / Firefox.) Solusi lintas-browser lain (JavaScript) yang mencakup edisi terbaru Opera. akan menggunakan skrip Hedger Wang yang ditemukan di sini: http://www.hedgerwow.com/360/dhtml/css-word-break.html
Tautan / pemikiran berguna lainnya:
Babak Incoherent »Blog Archive» Meniru bungkus kata CSS untuk Mozilla / Firefox
http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/
[OU] Tidak ada bungkus kata di Opera, ditampilkan dengan baik di IE
http://list.opera.com/pipermail/opera-users/2004-November/024467.html
http://list.opera.com/pipermail/opera- users / 2004-November / 024468.html
sumber
word-wrap: break-word;
properti CSS, jadi jika Anda tidak memerlukan dukungan di Firefox untuk versi sebelumnya, maka Anda dapat menghilangkan XBL.CSS Cross Browser Word Wrap
sumber
Gunakan gayanya
word-break:break-all;
. Saya tahu ini berfungsi di atas meja.sumber
Maksud Anda, di browser yang mendukungnya,
word-wrap: break-word
tidak berfungsi?Jika dimasukkan dalam definisi body dari stylesheet , itu harus bekerja di seluruh dokumen.
Jika overflow bukan solusi yang baik, hanya javascript khusus yang dapat memecah kata panjang.
Catatan: ada juga
<wbr>
tag Word Break ini . Ini memberi browser tempat di mana ia dapat membagi garis. Sayangnya,<wbr>
tag tidak berfungsi di semua browser, hanya Firefox dan Internet Explorer (dan Opera dengan trik CSS).sumber
Baru saja memeriksa IE 7, Firefox 3.6.8 Mac, Firefox 3.6.8 Windows, dan Safari:
berfungsi untuk tautan panjang di dalam div dengan lebar yang ditentukan dan tidak ada luapan yang dideklarasikan di css:
Saya tidak melihat masalah ketidakcocokan
sumber
Saya baru tahu tentang tanda hubung dari pertanyaan ini . Itu mungkin memecahkan masalah.
sumber
Setelah banyak pertempuran, inilah yang berhasil bagi saya:
Bekerja di versi terbaru Chrome, Firefox dan Opera.
Perhatikan bahwa saya mengecualikan banyak
white-space
properti yang disarankan orang lain - yang sebenarnya mematahkanpre
lekukan untuk saya.sumber
Bagi saya pada div tanpa ukuran tetap dan dengan konten dinamis berfungsi menggunakan:
sumber
Re regex dalam komentar ini , itu baik, tetapi menambahkan tanda hubung pemalu hanya antara kelompok 5 chars non-spasi putih atau tanda hubung. Itu memungkinkan grup terakhir lebih lama dari yang dimaksudkan, karena tidak ada grup yang cocok setelahnya.
Misalnya, ini:
... menghasilkan ini:
Ini adalah versi yang menggunakan lookahead positif untuk menghindari masalah itu:
... dengan hasil ini:
sumber
Solusi yang biasanya saya gunakan untuk masalah ini adalah dengan menetapkan 2 aturan css berbeda untuk IE dan browser lainnya:
wajan sempurna di IE, tetapi kata-wrap bukan properti CSS standar. Ini adalah properti spesifik Microsoft dan tidak berfungsi di Firefox.
Untuk Firefox, hal terbaik untuk dilakukan hanya menggunakan CSS adalah dengan menetapkan aturan
untuk elemen yang berisi teks yang ingin Anda bungkus. Itu tidak membungkus teks, tetapi menyembunyikan bagian teks yang melampaui batas wadah . Ini bisa menjadi solusi yang bagus jika tidak penting bagi Anda untuk menampilkan semua teks (yaitu jika teks ada di dalam
<a>
tag)sumber
Pembaruan: Menangani ini dalam CSS luar biasa sederhana dan overhead rendah, tetapi Anda tidak memiliki kontrol atas di mana istirahat terjadi ketika mereka melakukannya. Tidak masalah jika Anda tidak peduli, atau data Anda memiliki alfanumerik panjang tanpa jeda yang alami. Kami memiliki banyak jalur file panjang, URL, dan nomor telepon, yang semuanya memiliki tempat yang jauh lebih baik untuk dihancurkan daripada yang lain.
Solusi kami adalah pertama-tama menggunakan pengganti regex untuk menempatkan spasi nol-lebar (& # 8203;) setelah setiap 15 (katakanlah) karakter yang bukan spasi putih atau salah satu karakter khusus tempat kami lebih suka istirahat. Kami kemudian melakukan penggantian lain untuk menempatkan spasi nol-lebar setelah karakter khusus itu.
Ruang lebar nol bagus, karena tidak pernah terlihat di layar; tanda hubung pemalu membingungkan ketika mereka menunjukkan, karena data memiliki tanda hubung yang signifikan. Nol-lebar spasi juga tidak termasuk ketika Anda menyalin teks dari browser.
Karakter break khusus yang kami gunakan saat ini adalah titik, garis miring, garis miring terbalik, koma, garis bawah, @, |, dan tanda hubung. Anda tidak akan berpikir perlu melakukan apa pun untuk mendorong penghancuran setelah tanda hubung, tetapi Firefox (setidaknya 3,6 dan 4) tidak pecah dengan sendirinya di tanda hubung yang dikelilingi oleh angka (seperti nomor telepon).
Kami juga ingin mengontrol jumlah karakter antara jeda buatan, berdasarkan ruang tata letak yang tersedia. Itu berarti bahwa regex untuk mencocokkan berjalan lama tanpa melanggar harus dinamis. Ini dipanggil banyak, dan kami tidak ingin membuat regex identik yang sama berulang kali untuk alasan kinerja, jadi kami menggunakan cache regex sederhana, dikunci oleh ekspresi regex dan benderanya.
Ini kodenya; Anda mungkin akan namespace fungsi dalam paket utilitas:
Tes seperti ini:
Memperbarui 2: Tampaknya ruang nol-lebar sebenarnya yang termasuk dalam teks disalin dalam setidaknya beberapa keadaan, Anda tidak bisa melihat mereka. Jelas, mendorong orang untuk menyalin teks dengan karakter tersembunyi di dalamnya adalah undangan untuk memiliki data seperti itu yang dimasukkan ke dalam program atau sistem lain, bahkan Anda sendiri, di mana ia dapat menyebabkan masalah. Misalnya, jika berakhir di basis data, pencarian yang menentangnya mungkin gagal, dan string pencarian seperti ini juga cenderung gagal. Menggunakan tombol panah untuk bergerak melalui data seperti ini membutuhkan (benar) penekanan tombol ekstra untuk bergerak melintasi karakter yang tidak dapat Anda lihat, agak aneh bagi pengguna jika mereka perhatikan.
Dalam sistem tertutup, Anda dapat memfilter karakter itu pada input untuk melindungi diri Anda, tetapi itu tidak membantu program dan sistem lain.
Semua mengatakan, teknik ini bekerja dengan baik, tetapi saya tidak yakin apa pilihan terbaik dari karakter yang menyebabkan istirahat.
Pembaruan 3: Memiliki karakter ini berakhir di data bukan lagi kemungkinan teoretis, ini adalah masalah yang diamati. Pengguna mengirimkan data yang disalin dari layar, itu akan disimpan di db, pencarian istirahat, hal-hal semacam aneh, dll.
Kami melakukan dua hal:
Ini bekerja dengan baik, seperti halnya teknik itu sendiri, tetapi ini adalah kisah peringatan.
Pembaruan 4: Kami menggunakan ini dalam konteks di mana data yang diumpankan ke ini mungkin berasal dari HTML. Dalam keadaan yang tepat, ini dapat menyisipkan spasi nol-lebar di tengah-tengah entitas HTML, dengan hasil yang funky.
Perbaiki adalah untuk menambahkan ampersand ke daftar karakter yang tidak kita hancurkan, seperti ini:
sumber
if(domainName.length > 15) domainName.replace(/([^\\s]{5})(?=[^\\s])/g, '$1​');
Perlu mengatur "tata letak tabel: diperbaiki" agar bungkus kata berfungsi
sumber
UPDATE: Per Desember 2011, kami sekarang memiliki opsi lain, dengan dukungan yang muncul dari tag ini di FF dan Safari:
Saya telah melakukan beberapa pengujian dasar dan tampaknya berfungsi pada versi terbaru Mobile Safari dan Safari 5.1.1.
Tabel kompatibilitas: https://developer.mozilla.org/en/CSS/hyphens#AutoCompatibilityTable
sumber
Untuk kompatibilitas dengan IE 8+ gunakan:
Lihat di sini http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
Yang harus saya lakukan adalah menerapkan ini ke gaya wadah div dengan lebar yang ditetapkan.
sumber
Gunakan ini
sumber
Jika Anda memiliki ini -
cukup beralih ke format vertikal dengan mengandung divs dan gunakan min-width di CSS Anda alih-alih lebar -
Tentu saja, jika Anda menampilkan data tabular asli, boleh saja menggunakan tabel nyata karena secara semantik benar dan akan memberi tahu orang-orang yang menggunakan pembaca layar yang seharusnya ada dalam tabel. Itu menggunakan mereka untuk tata letak umum atau gambar-mengiris yang orang akan lynch Anda untuk.
sumber
Saya harus melakukan yang berikut karena, jika properti tidak dinyatakan dalam urutan yang benar, itu akan secara acak memecahkan kata-kata di tempat yang salah dan tanpa menambahkan tanda hubung.
Awalnya diposting oleh Enigmo: https://stackoverflow.com/a/14191114
sumber
Ya, jika memungkinkan, pengaturan lebar absolut dan pengaturan
overflow : auto
berfungsi dengan baik.sumber
sumber
"word-wrap: break-word" berfungsi di Firefox 3.5 http://hacks.mozilla.org/2009/06/word-wrap/
sumber
Tambahkan ini ke
css
div Anda:word-wrap: break-word;
sumber
setelah semua kata terbungkus dan pecah, pertahankan luapan Anda dan lihat apakah ini menyelesaikan masalah Anda. cukup ubah tampilan div Anda menjadi:
display: inline;
sumber
Fungsi sederhana (memerlukan underscore.js) - didasarkan pada jawaban @porneL
sumber
Saya telah menulis sebuah fungsi yang sangat bagus di mana ia memasukkan
­
x huruf ke dalam kata untuk garis yang baik. Semua jawaban di sini tidak mendukung semua browser dan perangkat tetapi ini bekerja dengan baik menggunakan PHP:sumber