Cara mencegah jeda baris pada tanda hubung di semua browser

104

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?

html css Alan
sumber
Anda dapat mempertimbangkan untuk mengubah jawaban yang diterima karena jawaban yang diterima saat ini memiliki solusi yang tidak berlaku lagi
inorganik

Jawaban:

51

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 ).

Jukka K. Korpela
sumber
35
The nobrtag tidak standar, dan sangat tidak dianjurkan oleh W3C. Lihat w3.org/TR/html5/obsolete.html#non-conforming-features
derekerdmann
18
Tidak seperti pendekatan lainnya, nobrmarkup berfungsi di semua browser, berfungsi bahkan saat stylesheet dinonaktifkan, dan bekerja secara independen dari dukungan untuk karakter khusus. Apakah ada masalah nyata dengannya?
Jukka K. Korpela
18
Mengapa tidak <span style = "white-space: nowrap"> </span>?
Brendan Byrd
6
@ JukkaK.Korpela Masalahnya adalah browser modern dapat memutuskan untuk menghentikan dukungannya, dan dapat melakukannya tanpa melanggar spesifikasi HTML. Ini adalah fitur "harus", yang hanya merupakan hal yang disarankan untuk diterapkan. Berkenaan dengan lembar gaya, jika pengguna menonaktifkan lembar gaya, maka mereka berharap untuk tidak memiliki gaya apa pun
mirhagk
3
Saya telah mengembangkan situs selama 10 tahun dan bahkan tidak tahu Anda BISA menonaktifkan stylesheet di browser Anda. Siapa yang benar-benar melakukannya (selain dari orang-orang yang juga memilih penandaan diri dari menonaktifkan JavaScript secara default di zaman sekarang ini)? Jika kita perlu bertele-tele, di mana solusi alternatif yang ditawarkan?
John Rix
274

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

HTML: &#x2011;atau&#8209;

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

menipu
sumber
4
Terima kasih banyak atas balasan Anda. Tapi yang perlu kita lakukan adalah mencegah jeda baris pada ckeditor di mana semua konten akan dimasukkan oleh pengguna akhir. kami tidak dapat memberi tahu semua orang untuk memasukkan tanda hubung tanpa putus unicode. Apakah ada cara lain untuk mencegah jeda baris? atau apakah ckeditor memiliki opsi untuk mengubah tanda hubung secara otomatis? Sekali lagi terima kasih
Alan
9
Anda dapat melakukan penggantian string sederhana, mengganti -dengan ‑.
menipu
14
Waspadalah terhadap dukungan font terbatas untuk U + 2011, lihat fileformat.info/info/unicode/char/2011/fontsupport.htm
Jukka K. Korpela
7
Meskipun hal ini secara teori lebih elegan daripada menempelkan nobrtag di semua tempat, ini tidak berfungsi dengan baik dalam praktiknya. IE menampilkannya sebagai tanda hubung en, Safari menambahkan lebih banyak ruang di sekitarnya daripada tanda hubung biasa, dan sebagian besar editor teks menampilkannya sebagai tanda tanya atau kotak atau karakter tidak berarti lainnya.
Tgr
4
@jakev Saya akan pergi dengan white-space: nowrapseperti yang disarankan oleh derekerdmann. Btw di FF / Win7, tanda pisah malu-malu tampaknya diubah menjadi tanda hubung biasa saat disalin & ditempel di luar Firefox, meskipun aplikasi targetnya mendukung Unicode.
Tgr
86

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

derekerdmann
sumber
1
Terima kasih banyak atas balasan Anda. Tapi konten teks kita akan dimasukkan oleh pengguna akhir melalui editor. kita tidak bisa menyuruh semua orang menambahkan <span> di sekitar kata. Apakah ada cara lain untuk mencapainya? Terima kasih
Alan
1
@Alan - Jenis konten apa yang mereka tambahkan yang tidak boleh berhenti di tanda hubung? Jika judul atau elemen lain yang akan selalu berada di satu baris, maka terapkan white-space: nowrapke seluruh penampung. Jika tidak, biarkan saja; pertama, tidak ada alasan untuk mencegah jeda baris dengan tanda hubung untuk konten umum, dan kedua, Anda tidak mungkin bisa mendapatkan apa yang Anda cari terjadi secara otomatis kecuali jika Anda bersedia meretas CKEditor.
derekerdmann
10
Ada banyak situasi di mana jeda baris setelah tanda hubung buruk atau sangat salah, seperti di "F-1" atau saat tanda hubung digunakan sebagai minus unary, seperti di "-42 °" (dan orang menggunakannya seperti itu, karena mereka tidak tahu tentang tanda minus).
Jukka K. Korpela
Ini berfungsi, tetapi fakta bahwa itu berfungsi tidak intuitif, karena tanda hubung bukanlah spasi kosong. <nobr>jauh lebih jelas.
Dave Burton
2

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;
}
Chris Happy
sumber
1
Saya suka idenya di sini, karena tidak melibatkan pengeditan setiap bit HTML yang mungkin berisi tanda hubung. Namun, saya menduga Anda mungkin mengalami masalah kinerja saat memproses setiap bit teks di seluruh halaman seperti ini, terutama jika ada banyak elemen.
Sean the Bean
0

Gunakan karakter penggabung kata ( &#8288;) 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&#8288;-&#8288;cream'));
}

atau semuanya ...

function fixhyphens(text) {
    return text.replace(/(\S+)-(\S+)/g,'$1&#8288;-&#8288;$2'));
}
Carter Medlin
sumber
-1

Coba CSS ini: 

word-break: break-all; 
-webkit-hyphens:none;
-moz-hyphens: none; 
hyphens: none;
Ma Yubo
sumber
7
Meskipun cuplikan kode ini dapat menyelesaikan pertanyaan, menyertakan penjelasan sangat membantu meningkatkan kualitas posting Anda. Ingatlah bahwa Anda menjawab pertanyaan untuk pembaca di masa mendatang, dan orang-orang itu mungkin tidak tahu alasan saran kode Anda. Harap juga mencoba untuk tidak membanjiri kode Anda dengan komentar penjelasan, ini mengurangi keterbacaan kode dan penjelasannya!
Ashish Ahuja