Cara mencegah jeda baris pada tanda hubung di semua browser

Kami memiliki ckeditor di CMS kami. Pengguna akhir kami akan memasukkan beberapa artikel panjang melalui ckeditor itu. Kami membutuhkan cara untuk mencegah jeda baris di tanda hubung pada artikel tersebut.

Apakah ada cara untuk mencegah jeda baris pada tanda hubung di semua browser?

atau apakah ckeditor memiliki opsi untuk mencegahnya?

Saya khawatir tidak ada cara yang lebih sederhana untuk melakukannya dengan andal selain memisahkan teks menjadi "kata" (urutan karakter non-spasi yang dipisahkan oleh spasi) dan membungkus setiap "kata" yang berisi tanda hubung di dalam nobrmarkup. Jadi data masukan seperti bla bla foo-bar bla blaakan dialihkan bla bla <nobr>foo-bar</nobr> bla bla.

Anda bahkan dapat mempertimbangkan untuk memasukkan nobrmarkup setiap kali "kata" berisi apa pun kecuali huruf dan angka. Alasannya adalah bahwa beberapa browser bahkan mungkin merusak string seperti "2/3" atau "f (0)" (lihat halaman saya tentang keanehan pemutusan baris di browser ).

Anda dapat menggunakan ‑ yang merupakan Unicode NON-BREAKING HYPHEN (U + 2011).

HTML: ‑atau‑

Lihat juga: http://en.wikipedia.org/wiki/Hyphen#In_computing

Salah satu solusinya adalah menggunakan spantag ekstra dan white-spaceproperti CSS. Tentukan saja kelas seperti ini:

.nowrap {
    white-space: nowrap;
}

Dan kemudian tambahkan rentang dengan kelas itu di sekitar teks bertanda hubung Anda.

<p>This is the <span class="nowrap">anti-inflammable</span> model</p>

Pendekatan ini seharusnya bekerja dengan baik di semua browser - implementasi buggy yang tercantum di sini adalah untuk nilai white-spaceproperti lainnya: http://reference.sitepoint.com/css/white-space#compatibilitysection

Anda tidak dapat melakukannya tanpa mengedit setiap contoh HTML. Akibatnya, saya menulis beberapa JS untuk menggantikannya:

jQuery:

//replace hypens with no-breaking ones
$txt = $("#block-views-video-block h2");
$txt.text( $txt.text().replace(/-/g, '‑') );

Vanilla JS:

function nonBrHypens(id) {
    var str = document.getElementById(id).innerHTML; 
    var txt = str.replace(/-/g, '‑');
    document.getElementById(id).innerHTML = txt;
}

Gunakan karakter penggabung kata ( ⁠) di sekitar tanda hubung. Ia bekerja di IE juga.

https://en.wikipedia.org/wiki/Word_joiner

perbaiki tanda hubung tertentu ...

function fixicecream(text) {
    return text.replace(/ice-cream/g,'ice⁠-⁠cream'));
}

atau semuanya ...

function fixhyphens(text) {
    return text.replace(/(\S+)-(\S+)/g,'$1⁠-⁠$2'));
}

Coba CSS ini:

word-break: break-all; 
-webkit-hyphens:none;
-moz-hyphens: none; 
hyphens: none;