Bagaimana Anda memecahkan masalah dengan tanda hubung lunak pada halaman web Anda? Dalam sebuah teks mungkin ada kata-kata panjang yang mungkin ingin Anda hilangkan dengan tanda hubung. Tetapi Anda tidak ingin tanda hubung itu ditampilkan jika seluruh kata ada di baris yang sama.

Menurut komentar di halaman ini <wbr> adalah "sup tag tidak ditemukan oleh Netscape". Sepertinya ­ memiliki masalah dengan kepatuhan standar juga . Tampaknya tidak ada cara untuk mendapatkan solusi yang berfungsi untuk semua browser .

Yang mana cara Anda untuk menangani tanda hubung lunak dan mengapa Anda memilihnya? Apakah ada solusi yang disukai atau praktik terbaik?

Sayangnya, &shydukungan sangat tidak konsisten antar browser sehingga tidak dapat digunakan.

QuirksMode benar - tidak ada cara yang baik untuk menggunakan tanda hubung lunak dalam HTML sekarang. Lihat apa yang dapat Anda lakukan untuk pergi tanpa mereka.

Sunting 2013: Menurut QuirksMode , ­sekarang berfungsi / didukung di semua browser utama.

Ringkasan Februari 2015 (sebagian diperbarui Nov 2017)

Mereka semua berkinerja cukup baik, ­mengatasinya karena Google masih dapat mengindeks kata-kata yang mengandungnya.

• Di browser: ­ dan ­keduanya ditampilkan seperti yang diharapkan di browser utama (bahkan IE lama!). <wbr>tidak didukung di versi terbaru IE (10 atau 11) dan tidak berfungsi dengan baik di Edge.
• Ketika disalin dan ditempelkan dari browser: (diuji 2015) seperti yang diharapkan untuk ­dan ­untuk Chrome dan Firefox di Mac, pada Windows (10), itu membuat karakter dan menempelkan tanda hubung yang keras ke dalam Notepad dan tanda hubung yang tidak terlihat ke dalam aplikasi yang mendukungnya. IE (win7) selalu menempel dengan tanda hubung, bahkan dalam IE10, dan salinan Safari (Mac) dengan cara yang ditempelkan sebagai tanda hubung dalam beberapa aplikasi (misalnya MS Word), tetapi tidak yang lain
• Temukan di halaman berfungsi untuk ­dan ­di semua browser kecuali IE yang hanya cocok dengan kecocokan disalin dan tempel persis (bahkan hingga IE11)
• Mesin pencari: Google mencocokkan kata-kata yang mengandung kata- ­kata yang diketik secara normal. Pada 2017 tampaknya tidak cocok lagi dengan kata-kata yang mengandung ­. Yandex appers menjadi sama. Bing dan Baidu juga tampaknya tidak cocok.

Menguji

Untuk pengujian langsung terkini, berikut adalah beberapa contoh kata unik dengan tanda hubung lunak.

• ­- confumbabbl­ication­ism- confumbabblicationism
  • .................................................. .................................................. .......... confumbabblicationism
  • .................................................. .................................................. .............. confumbabblicationism

<wbr>- donfounbabbl<wbr>ication<wbr>ism. Situs ini menghapus <wbr/>dari output. Berikut cuplikan jsbin.com untuk pengujian .

• ­- eonfulbabbl­ication­ism- ebfulbabblicationism
  • .................................................. .................................................. ............. eonfulbabblicationism
  • .................................................. .................................................. ................ ebfulbabblicationism

Di sini mereka tanpa tanda hubung pemalu (ini untuk menyalin dan menempel ke pengujian menemukan-di-halaman; ditulis dengan cara yang tidak akan merusak tes mesin pencari):

ZZZconfumbabblicationismZZZdonfounbabblicationismZZZeonfulbabblicationismZZZ

Tampilkan di seluruh browser

Sukses: ditampilkan sebagai kata normal, kecuali di mana kata itu harus patah, ketika kata itu pecah dan tanda hubung di tempat yang ditentukan.

Kegagalan: menampilkan tidak biasa, atau gagal pecah di tempat yang dituju.

• Chrome (40.0.2214.115, Mac): ­sukses, <wbr>sukses, ­sukses
• Firefox (35.0.1, Mac): ­sukses, <wbr>sukses, ­sukses
• Safari (6.1.2, Mac): ­sukses, <wbr> belum diuji , ­sukses
• Edge (Windows 10): ­sukses, <wbr> gagal (putus tapi tidak ada tanda hubung), ­sukses
• IE11 (Windows 10): ­sukses, <wbr> gagal (tanpa istirahat), ­sukses
• IE10 (Windows 10): ­sukses, <wbr> gagal (tanpa istirahat), ­sukses
• IE8 (Windows 7): tidak menentu - kadang-kadang, tidak ada yang bekerja sama sekali dan mereka semua hanya mengikuti css word-wrap. Kadang-kadang, mereka sepertinya berhasil. Belum ditemukan pola yang jelas mengapa.
• IE7 (Windows 7): ­sukses, <wbr>sukses, ­sukses

Salin-tempel di browser

Sukses: menyalin dan menempelkan seluruh kata, tanpa cacat. (diuji pada Mac paste ke pencarian browser, MS Word 2011, dan Sublime Text)

Kegagalan: menempel dengan tanda hubung, spasi, baris, atau dengan karakter sampah.

• Chrome (40.0.2214.115, Mac): ­sukses, <wbr>sukses, ­sukses
• Firefox (35.0.1, Mac): ­sukses, <wbr>sukses, ­sukses
• Safari (6.1.2, Mac): ­ gagal menjadi MS Word (menyisipkan semua sebagai tanda hubung), sukses di aplikasi lain <wbr> gagal , ­ gagal ke MS Word (menyisipkan semua sebagai tanda hubung), sukses di aplikasi lain
• IE10 (Win7): ­ gagal pasta semua sebagai tanda hubung, <wbr> gagal , ­ gagal pasta semua sebagai tanda hubung
• IE8 (Win7): ­ gagal pasta semua sebagai tanda hubung, <wbr> gagal , ­ gagal pasta semua sebagai tanda hubung
• IE7 (Win7): ­ gagal pasta semua sebagai tanda hubung, <wbr> gagal , ­ gagal pasta semua sebagai tanda hubung

Pencocokan mesin pencari

Diperbarui pada November 2017. <wbr>tidak diuji karena CMS StackOverflow menghapusnya.

Sukses: pencarian pada keseluruhan, kata yang tidak ditulis dengan tanda penghubung menemukan halaman ini.

Kegagalan: mesin pencari hanya menemukan halaman ini pada pencarian untuk segmen kata yang patah, atau kata dengan tanda hubung.

• Google: ­gagal, ­berhasil
• Bing: ­gagal, ­gagal
• Baidu: ­gagal, ­gagal (dapat mencocokkan fragmen dalam string yang lebih panjang tetapi tidak dengan kata-kata yang berisi ­atau ­)
• Yandex: ­gagal, ­berhasil (walaupun mungkin itu cocok dengan fragmen string seperti Baidu, tidak 100% yakin)

Temukan di halaman di seluruh browser

Berhasil dan gagal sebagai pencocokan mesin pencari.

• Chrome (40.0.2214.115, Mac): ­sukses, <wbr>sukses, ­sukses
• Firefox (35.0.1, Mac): ­sukses, <wbr>sukses, ­sukses
• Safari (6.1.2, Mac): ­sukses, <wbr>sukses, ­sukses
• IE10 (Win7): ­ gagal hanya cocok ketika keduanya berisi tanda hubung pemalu, <wbr>sukses, ­ gagal hanya cocok ketika keduanya berisi tanda hubung pemalu
• IE8 (Win7): ­ gagal hanya cocok ketika keduanya berisi tanda hubung pemalu, <wbr>sukses, ­ gagal hanya cocok ketika keduanya berisi tanda hubung pemalu
• IE7 (Win7): ­ gagal hanya cocok ketika keduanya berisi tanda hubung pemalu, <wbr>sukses, ­ gagal hanya cocok ketika keduanya berisi tanda hubung pemalu

Ada upaya berkelanjutan untuk membakukan hyphenation di CSS3 .

Beberapa browser modern, terutama Safari dan Firefox, sudah mendukung ini. Berikut ini adalah referensi yang baik dan terkini tentang dukungan browser .

Setelah hyphenation CSS diterapkan secara universal, itu akan menjadi solusi terbaik. Sementara itu, saya dapat merekomendasikan Hyphenator - sebuah skrip JS yang mencari cara untuk hyphenate teks Anda dengan cara yang paling sesuai untuk browser tertentu.

Tanda hubung:

• mengandalkan algoritma hyphenation Franklin M. Liangs , umumnya dikenal dari LaTeX dan OpenOffice.
• menggunakan hyphenation CSS3 di mana itu tersedia,
• secara otomatis memasukkan ­pada sebagian besar browser lain,
• mendukung banyak bahasa,
• sangat dapat dikonfigurasi,
• mundur dengan anggun jika javascript tidak diaktifkan.

Saya sudah menggunakannya dan itu bekerja dengan baik!

Saya menggunakan ­, dimasukkan secara manual jika perlu.

Saya selalu merasa kasihan bahwa orang tidak menggunakan teknik karena ada beberapa browser — mungkin lama atau aneh — yang tidak menangani mereka seperti cara yang ditentukan. Saya menemukan bahwa ­berfungsi dengan baik di browser Internet Explorer dan Firefox baru-baru ini, itu sudah cukup. Anda dapat menyertakan pemeriksaan peramban yang memberi tahu orang-orang untuk menggunakan sesuatu yang matang atau melanjutkan dengan risiko mereka sendiri jika mereka menemukan peramban yang aneh.

Silabusifikasi tidak mudah dan saya tidak bisa merekomendasikan untuk membiarkannya menggunakan Javascript . Ini adalah topik khusus bahasa dan mungkin perlu direvisi dengan hati-hati oleh petugas jika Anda tidak ingin teks Anda menjengkelkan. Beberapa bahasa, seperti Jerman, membentuk kata majemuk dan cenderung menyebabkan masalah penguraian. Misalnya Spargelder( kuman. Uang yang disimpan, jamak) dapat, dengan aturan suku kata, dibungkus dalam dua tempat ( Spar-gel-der). Namun, membungkusnya di posisi kedua, mengubah bagian pertama yang muncul sebagai Spargel-( kuman. Asparagus), mengaktifkan konsep yang sepenuhnya menyesatkan di kepala pembaca dan karenanya harus dihindari.

Dan bagaimana dengan talinya Wachstube? Ini bisa berarti 'ruang penjaga' ( Wach-stu-be) atau 'tabung lilin' ( Wachs-tu-be). Anda mungkin dapat menemukan contoh lain dalam bahasa lain juga. Anda harus bertujuan untuk menyediakan lingkungan di mana petugas dapat didukung dalam menciptakan teks yang memiliki suku kata yang baik, pembacaan bukti setiap kata penting.

Sangat penting untuk memperhatikan bahwa, pada HTML5, <wbr>dan ­ tidak seharusnya melakukan hal yang sama !

Tanda hubung lembut

­adalah tanda hubung lunak, yaitu, U + 00AD: SOFT HYPHEN. Sebagai contoh,

innehålls­förteckning

mungkin diterjemahkan sebagai

innehållsförteckning

atau sebagai

innehålls-
förteckning

Sampai hari ini, tanda hubung lunak berfungsi di Firefox, Chrome, dan Internet Explorer.

The wbrelemen

The wbrelemen adalah kesempatan kata-break, yang tidak akan menampilkan tanda hubung jika satu baris terjadi. Sebagai contoh,

ABCDEFG<wbr/>abcdefg

mungkin diterjemahkan sebagai

ABCDEFGabcdefg

atau sebagai

ABCDEFG
abcdefg

Sampai hari ini, elemen ini berfungsi di Firefox dan Chrome.

The ruang nol-lebar badan dapat digunakan di tempat <wbr>tag andal di hampir semua platform.

​

Juga berguna adalah kata joiner entity, yang dapat digunakan untuk melarang istirahat. (Sisipkan antara setiap karakter kata, kecuali di mana Anda ingin istirahat.)

⁠

Dengan keduanya, Anda bisa melakukan apa saja.

Ini adalah solusi crossbrowser yang saya lihat beberapa waktu lalu yang berjalan pada klien dan menggunakan jQuery:

(function($) { 
  $.fn.breakWords = function() { 
    this.each(function() { 
      if(this.nodeType !== 1) { return; } 

      if(this.currentStyle && typeof this.currentStyle.wordBreak === 'string') { 
        //Lazy Function Definition Pattern, Peter's Blog 
        //From http://peter.michaux.ca/article/3556 
        this.runtimeStyle.wordBreak = 'break-all'; 
      } 
      else if(document.createTreeWalker) { 

        //Faster Trim in Javascript, Flagrant Badassery 
        //http://blog.stevenlevithan.com/archives/faster-trim-javascript 

        var trim = function(str) { 
          str = str.replace(/^\s\s*/, ''); 
          var ws = /\s/, 
          i = str.length; 
          while (ws.test(str.charAt(--i))); 
          return str.slice(0, i + 1); 
        }; 

        //Lazy Function Definition Pattern, Peter's Blog 
        //From http://peter.michaux.ca/article/3556 

        //For Opera, Safari, and Firefox 
        var dWalker = document.createTreeWalker(this, NodeFilter.SHOW_TEXT, null, false); 
        var node,s,c = String.fromCharCode('8203'); 
        while (dWalker.nextNode()) { 
          node = dWalker.currentNode; 
          //we need to trim String otherwise Firefox will display 
          //incorect text-indent with space characters 
          s = trim( node.nodeValue ).split('').join(c); 
          node.nodeValue = s; 
        } 
      } 
    }); 

    return this; 
  }; 
})(jQuery); 

Saya sarankan menggunakan wbr, jadi kodenya bisa ditulis seperti ini:

<p>这里有一段很长，很长的<wbr
></wbr>文字；这里有一段</p>

Itu tidak akan memimpin ruang antara karakter, sementara ­tidak akan menghentikan ruang yang dibuat oleh jeda baris.

Saya berhasil menggunakan karakter soft hyphen unicode di beberapa browser desktop dan mobile untuk menyelesaikan masalah ini.

Simbol unicode adalah \u00ADdan cukup mudah untuk dimasukkan ke dalam string unicode Python seperti s = u'Языки и методы програм\u00ADми\u00ADро\u00ADва\u00ADния'.

Solusi lain adalah dengan memasukkan unicode char itu sendiri, dan string sumber akan terlihat sangat biasa di editor seperti Sublime Text, Kate, Geany, dll. (Kursor akan merasakan simbol yang tidak terlihat sekalipun).

Editor hex alat in-house dapat mengotomatisasi tugas ini dengan mudah.

Kludge yang mudah adalah dengan menggunakan karakter langka dan terlihat, seperti ¦, yang mudah untuk disalin dan ditempel, dan menggantinya dengan menggunakan tanda hubung lunak, misalnya skrip frontend di $(document).ready(...). Kode sumber seperti s = u'Языки и методы про¦гра¦м¦ми¦ро¦ва¦ния'.replace('¦', u'\u00AD')lebih mudah dibaca daripada s = u'Языки и методы про\u00ADг\u00ADра\u00ADм\u00ADми\u00ADро\u00ADва\u00ADния'.

Terkadang browser web tampaknya lebih memaafkan jika Anda menggunakan string Unicode ­daripada ­entitas.

Jika Anda bernasib buruk dan masih harus menggunakan JSF 1, maka satu-satunya solusi adalah menggunakan & # 173 ;, & pemalu; tidak bekerja.

<wbr> dan & malu;

Hari ini kamu bisa menggunakan keduanya.

<wbr> gunakan untuk merusak dan tidak menaruh informasi lebih lanjut.

Contoh, gunakan untuk menampilkan tautan:

 https://stackoverflow.com/questions/226464/soft-hyphen-in-html-wbr-vs-shy

&pemalu; bila perlu, pada titik ini teks akan pecah dan menambahkan tanda hubung.

Contoh:

"É im & shy; pos & shy; sí & shy; vel pa & shy; ra um ho & shy; mem a & shy; pren & shy; der a & shy; qui & shy; lo que ele acha que já sa & shy; be."

div{
  max-width: 130px;
  border-width: 2px;
  border-style: dashed;
  border-color: #f00;
  padding: 10px;
}

<div>https://<wbr>stackoverflow.com<wbr>/questions/226464<wbr>/soft-hyphen-in-<wbr>html-wbr-vs-shy</div>

<div>É im&shy;pos&shy;sí&shy;vel pa&shy;ra um ho&shy;mem a&shy;pren&shy;der a&shy;qui&shy;lo que ele acha que já sa&shy;be.</div>