Bagaimana mencegah kata-kata panjang dari melanggar div saya?

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?

Tanda hubung lembut

Anda dapat memberi tahu browser tempat memisahkan kata-kata panjang dengan memasukkan tanda hubung lunak ( ­):

averyvery­longword

dapat diterjemahkan sebagai

kata yang sangat panjang

atau

kata-kata
panjang

Ekspresi reguler yang bagus dapat memastikan Anda tidak akan memasukkannya kecuali perlu:

/([^\s-]{5})([^\s-]{5})/ → $1­$2

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> elemen

Pilihan lain adalah menyuntikkan <wbr>, mantan IE-isme , yang sekarang dalam HTML5 :

averyvery<wbr>longword

Putus tanpa tanda hubung:

kata yang sangat
bagus

Anda dapat mencapai hal yang sama dengan karakter spasi nol-lebar ​(atau &#x200B).

FYI ada juga CSS yanghyphens: auto didukung oleh IE, Firefox dan Safari terbaru ( tetapi saat ini bukan Chrome ):

div.breaking {
  hyphens: auto;
}

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, tetapi display:tablepada elemen lain baik-baik saja. Ini akan sama aneh (dan melar) dengan tabel old-school:

div.breaking {
   display: table-cell;
}

overflowdan white-space: pre-wrapjawaban di bawah juga bagus.

Dua perbaikan:

1. overflow:scroll - ini memastikan konten Anda dapat dilihat dengan biaya desain (scrollbar jelek)
2. 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 overflowproperti CSS tidak sempurna tetapi berhenti merusak desain. Lamar overflow:hiddendulu. Ingatlah bahwa overflow mungkin tidak merusak padding sehingga sarang divatau 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:autoatau overflow:scrollbukannya overflow: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.

Ini 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:

.word-break {
  /* The following styles prevent unbroken strings from breaking the layout */
  width: 300px; /* set to whatever width you need */
  overflow: auto;
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -hp-pre-wrap; /* HP printers */
  white-space: -o-pre-wrap; /* Opera 7 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word; /* IE */
  -moz-binding: url('xbl.xml#wordwrap'); /* Firefox (using XBL) */
}

Dalam kasus browser berbasis Mozilla, file XBL yang disebutkan di atas mengandung:

<?xml version="1.0" encoding="utf-8"?>
<bindings xmlns="http://www.mozilla.org/xbl" 
          xmlns:html="http://www.w3.org/1999/xhtml">
  <!--
  More information on XBL:
  http://developer.mozilla.org/en/docs/XBL:XBL_1.0_Reference

  Example of implementing the CSS 'word-wrap' feature:
  http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/
  -->
  <binding id="wordwrap" applyauthorstyles="false">
    <implementation>
      <constructor>
        //<![CDATA[
        var elem = this;

        doWrap();
        elem.addEventListener('overflow', doWrap, false);

        function doWrap() {
          var walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false);
          while (walker.nextNode()) {
            var node = walker.currentNode;
            node.nodeValue = node.nodeValue.split('').join(String.fromCharCode('8203'));
          }
        }
        //]]>
      </constructor>
    </implementation>
  </binding>
</bindings>

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

CSS Cross Browser Word Wrap

.word_wrap
{
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Gunakan gayanya word-break:break-all;. Saya tahu ini berfungsi di atas meja.

Maksud Anda, di browser yang mendukungnya, word-wrap: break-wordtidak 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).

Baru saja memeriksa IE 7, Firefox 3.6.8 Mac, Firefox 3.6.8 Windows, dan Safari:

word-wrap: break-word;

berfungsi untuk tautan panjang di dalam div dengan lebar yang ditentukan dan tidak ada luapan yang dideklarasikan di css:

#consumeralerts_leftcol{
    float:left;
    width: 250px;
    margin-bottom:10px;
    word-wrap: break-word;
}

Saya tidak melihat masalah ketidakcocokan

Saya baru tahu tentang tanda hubung dari pertanyaan ini . Itu mungkin memecahkan masalah.

Setelah banyak pertempuran, inilah yang berhasil bagi saya:

.pre {
    font-weight: 500;
    font-family: Courier New, monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Bekerja di versi terbaru Chrome, Firefox dan Opera.

Perhatikan bahwa saya mengecualikan banyak white-spaceproperti yang disarankan orang lain - yang sebenarnya mematahkan prelekukan untuk saya.

Bagi saya pada div tanpa ukuran tetap dan dengan konten dinamis berfungsi menggunakan:

display:table;
word-break:break-all;

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:

'abcde12345678901234'.replace(/([^\s-]{5})([^\s-]{5})/g, '$1­$2')

... menghasilkan ini:

abcde­12345678901234

Ini adalah versi yang menggunakan lookahead positif untuk menghindari masalah itu:

.replace(/([^\s-]{5})(?=[^\s-])/g, '$1­')

... dengan hasil ini:

abcde­12345­67890­1234

Solusi yang biasanya saya gunakan untuk masalah ini adalah dengan menetapkan 2 aturan css berbeda untuk IE dan browser lainnya:

word-wrap: break-word;

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

overflow: hidden;

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)

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:

makeWrappable = function(str, position)
{
    if (!str)
        return '';
    position = position || 15; // default to breaking after 15 chars
    // matches every requested number of chars that's not whitespace or one of the special chars defined below
    var longRunsRegex = cachedRegex('([^\\s\\.\/\\,_@\\|-]{' + position + '})(?=[^\\s\\.\/\\,_@\\|-])', 'g');
    return str
                .replace(longRunsRegex, '$1​') // put a zero-width space every requested number of chars that's not whitespace or a special char
                .replace(makeWrappable.SPECIAL_CHARS_REGEX, '$1​'); // and one after special chars we want to allow breaking after
};
makeWrappable.SPECIAL_CHARS_REGEX = /([\.\/\\,_@\|-])/g; // period, forward slash, backslash, comma, underscore, @, |, hyphen


cachedRegex = function(reString, reFlags)
{
    var key = reString + (reFlags ? ':::' + reFlags : '');
    if (!cachedRegex.cache[key])
        cachedRegex.cache[key] = new RegExp(reString, reFlags);
    return cachedRegex.cache[key];
};
cachedRegex.cache = {};

Tes seperti ini:

makeWrappable('12345678901234567890 12345678901234567890 1234567890/1234567890')

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:

1. Menulis utilitas untuk menghapusnya dari semua kolom semua tabel di semua sumber data untuk aplikasi ini.
2. Menambahkan pemfilteran untuk menghapusnya ke prosesor input string standar kami, sehingga hilang saat kode melihatnya.

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:

var longRunsRegex = cachedRegex('([^&\\s\\.\/\\,_@\\|-]{' + position + '})(?=[^&\\s\\.\/\\,_@\\|-])', 'g');

Perlu mengatur "tata letak tabel: diperbaiki" agar bungkus kata berfungsi

HYPHENATOR adalah jawaban yang tepat (diberikan di atas). Masalah sebenarnya di balik pertanyaan Anda adalah bahwa browser web masih (pada 2008) sangat primitif sehingga mereka tidak memiliki fitur tanda hubung. Lihat, kita masih berada di awal penggunaan komputer - kita harus bersabar. Selama desainer menguasai dunia web, kita akan kesulitan menunggu beberapa fitur baru yang sangat berguna.

UPDATE: Per Desember 2011, kami sekarang memiliki opsi lain, dengan dukungan yang muncul dari tag ini di FF dan Safari:

p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

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

Untuk kompatibilitas dengan IE 8+ gunakan:

-ms-word-break: break-all;
     word-break: break-all;

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

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

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.

Gunakan ini

word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-all;

Jika Anda memiliki ini -

  <style type="text/css">
      .cell {
            float: left;
            width: 100px;
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="cell">TopLeft</div>
  <div class="cell">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
  <div class="cell">TopRight</div>
  <br/>
  <div class="cell">BottomLeft</div>
  <div class="cell">BottomMiddle</div>
  <div class="cell">bottomRight</div>

cukup beralih ke format vertikal dengan mengandung divs dan gunakan min-width di CSS Anda alih-alih lebar -

  <style type="text/css">
      .column {
            float: left;
            min-width: 100px;
      }
      .cell2 {
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="column">
      <div class="cell2">TopLeft</div>
      <div class="cell2">BottomLeft</div>
  </div>
  <div class="column">
      <div class="cell2">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
      <div class="cell2">BottomMiddle</div>
  </div>
  <div class="column">
      <div class="cell2">TopRight</div>
      <div class="cell2">bottomRight</div>
  </div>
  <br/>

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.

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.

    -moz-white-space: pre-wrap;
white-space: pre-wrap;        
    hyphens: auto;
    -ms-word-break: break-all;
    -ms-word-wrap: break-all;
    -webkit-word-break: break-word;
    -webkit-word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
hyphens: auto;

Awalnya diposting oleh Enigmo: https://stackoverflow.com/a/14191114

Ya, jika memungkinkan, pengaturan lebar absolut dan pengaturan overflow : autoberfungsi dengan baik.

p {
    overflow-wrap: break-word;
}


@-moz-document url-prefix() { 
    p {
        white-space: -moz-pre-wrap;
        word-wrap: break-word;
    }
}

"word-wrap: break-word" berfungsi di Firefox 3.5 http://hacks.mozilla.org/2009/06/word-wrap/

Tambahkan ini ke cssdiv Anda:word-wrap: break-word;

setelah semua kata terbungkus dan pecah, pertahankan luapan Anda dan lihat apakah ini menyelesaikan masalah Anda. cukup ubah tampilan div Anda menjadi:display: inline;

Fungsi sederhana (memerlukan underscore.js) - didasarkan pada jawaban @porneL

    String.prototype.shyBreakString = function(maxLength) {
        var shystring = [];
        _.each(this.split(' '), function(word){
            shystring.push(_.chop(word, maxLength).join('­'));
        });
        return shystring.join(' ');
    };

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:

/**
 * Add line-break to text x characters in
 * @param  string  $text          
 * @param  integer $characters_in 
 * @return string                 
 */
function line_break_text($text, $characters_in = 10) {

    $split = explode(' ', $text);

    if ( ! empty($split)) {

        foreach ($split as $key => $var) {

            if ( strlen($var) > $characters_in ) {

                $split[$key] = substr_replace($var, '­', $characters_in, 0);

            }

        }

    }

    return implode(' ', $split);

}