Pertanyaan 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 pada tanda hubung pada artikel tersebut.

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

atau apakah ckeditor memiliki opsi untuk mencegahnya?


75
2018-01-06 04:15


asal


Jawaban:


Saya khawatir tidak ada cara yang lebih mudah untuk melakukannya dengan andal daripada memisahkan teks menjadi "kata-kata" (urutan karakter non-spasi yang dipisahkan oleh spasi) dan membungkus setiap "kata" yang berisi tanda hubung di dalam nobr markup. Jadi input data seperti bla bla foo-bar bla bla akan dihidupkan bla bla <nobr>foo-bar</nobr> bla bla.

Anda bahkan mungkin mempertimbangkan memasukkan nobr markup setiap kali kata "" mengandung apa pun kecuali huruf dan digit. Alasannya adalah bahwa beberapa browser bahkan dapat mematahkan string seperti "2/3" atau "f (0)" (lihat halaman saya di keanehan melanggar garis di browser).


41
2018-01-06 08:12



Kamu dapat memakai   yang merupakan Unicode NON-BREAKING HYPHEN (U + 2011).

HTML: &#x2011; atau &#8209;

Juga lihat: http://en.wikipedia.org/wiki/Hyphen#In_computing


200
2018-01-06 04:18



Satu solusi bisa menggunakan ekstra span tag dan white-space Properti CSS. Cukup tentukan kelas seperti ini:

.nowrap {
    white-space: nowrap;
}

Lalu tambahkan rentang dengan kelas tersebut di sekitar teks ditulis dgn tanda penghubung Anda.

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

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


64
2018-01-06 04:24



Anda tidak dapat melakukannya tanpa mengedit setiap instance 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;
}

1
2018-04-25 19:47



coba ini

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

-1
2018-06-01 10:03