Tidak ada jeda baris setelah tanda hubung

340

Saya mencari untuk mencegah jeda baris setelah tanda hubung -berdasarkan kasus per kasus yang kompatibel dengan semua browser.

Contoh:

Saya punya teks ini: 3-3/8"yang dalam HTML adalah ini: 3-3/8”

Masalahnya adalah bahwa di dekat akhir baris, karena tanda hubung, itu putus dan membungkus ke baris berikutnya bukannya memperlakukannya seperti kata lengkap ...

3-
3/8"

Saya sudah mencoba memasukkan "zero width no break character", tanpa hasil ...

3-&#65279;3/8&rdquo;

Saya melihat ini di Safari dan berpikir itu akan sama di semua browser.

Berikut ini adalah doctypepenyandian karakter saya dan ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

Apakah ada cara saya bisa mencegah ini dari melanggar garis setelah tanda hubung? Saya tidak memerlukan solusi apa pun yang berlaku untuk seluruh halaman ... hanya sesuatu yang dapat saya masukkan sesuai kebutuhan, seperti "karakter lebar nol tanpa istirahat", kecuali yang berfungsi.

Ini Demo. Cukup buat bingkai menjadi lebih sempit sampai garis putus pada tanda hubung.

http://jsfiddle.net/RagKH/

html css character-encoding line-breaks hyphenation Sparky
sumber

@EricLeschinski, itu sudah diposting sebagai jawaban: stackoverflow.com/a/12362315/594235

Sparky

Dengan charset = utf-8 Anda dapat memasukkan - tanda hubung non breaking

QuentinUK

@ QuentinUK, kan ... bukankah itu sudah jawaban yang diterima? ‑adalah tanda hubung yang tidak putus-putus.

Sparky

& # 8209; adalah ASCII biasa, jadi utf-8 tidak perlu. Dengan pengkodean utf-8 pada halaman, dimungkinkan untuk memasukkan karakter yang sebenarnya. - bukan karakter yang sama dengan - meskipun terlihat sama.

QuentinUK

HTML yang benar untuk apa yang Anda tulis, akan menjadi 3-3/8″atau 3-3/8″. Kutipan bukan bilangan prima. Jika Anda menginginkannya dalam ASCII murni, gunakan saja tanda kutip ganda sebagai gantinya ( "). Lebih disukai, jika akan disajikan sebagai teks yang baik dan dapat dibaca, Anda lebih suka menggunakan 33/8</style>″, menampilkan '3⅜ ″'

Canned Man

579

Coba gunakan tanda hubung yang tidak putus ‑. Saya telah mengganti tanda hubung dengan karakter itu di jsfiddle Anda, menyusut bingkai ke bawah sekecil mungkin, dan garis tidak terpecah di sana lagi.

CanSpice
sumber

10

Saya pikir itu adalah sesuatu seperti ruang yang tidak pecah, jadi saya hanya mencari 'dash yang tidak putus', dan berakhir di sini . :-)

CanSpice

Ahhh ... Saya melakukan pencarian "tanpa istirahat karakter" dan menabrak dinding dengan itu . Tidak pernah terpikir oleh saya bahwa ada karakter tanda hubung yang berdiri sendiri yang tidak akan pecah.

Sparky

6

Dalam IE8 / 9 karakter ini diterjemahkan lebih lama dari tanda hubung biasa. Tampaknya memiliki ukuran yang sama dengan en-dash.

mrtsherman

21

Alasan mengapa hasilnya mungkin berbeda dari tanda hubung normal adalah bahwa banyak font tidak mengandung tanda hubung non-breaking. Pasukan browser ini untuk menggunakan font yang berbeda, dan sementara tanda hubung non-breaking terlihat sama seperti tanda hubung normal dalam bahwa font, tidak ada jaminan bahwa itu cocok dengan tanda hubung yang normal dari font yang berbeda.

Jukka K. Korpela

5

Saya pikir jawaban Deb adalah yang terbaik.

Ray Cheng

256

Anda juga dapat membungkus teks yang relevan dengan

<span style="white-space: nowrap;"></span>

Deb
sumber

17

Ya, ini adalah jawaban yang lebih baik daripada yang diterima imho. Terima kasih @ deb.

CMH

38

@ CMH ini tidak membantu jika Anda ingin membungkus spasi putih (tempat kosong di mana pengguna melihat spasi putih - tidak ada) tetapi Anda tidak ingin membagi kata dengan tanda hubung, misalnya kata "email". Jawaban yang diterima membantu dalam kasus ini

xmojmr

12

Dalam hal ini, Anda hanya dapat menggunakan rentang hanya di sekitar "email".

guirto

3

@ CMH, ini adalah jawaban yang baik yang juga berfungsi, jadi saya memilihnya. Namun, saya memilih untuk tidak menerima jawaban ini karena saya meminta karakter yang tidak akan otomatis terputus ke baris berikutnya. Fakta bahwa "tanda hubung non-putus" ( ‑) mungkin membuat sedikit lebih lama daripada tanda hubung biasa di browser tertentu adalah sepele bagi saya.

Sparky

11

@Parky Satu masalah dengan menggunakan karakter yang berbeda adalah mengacaukan hasil pencarian. Mencoba menemukan "3-3 / 8" pada halaman tidak akan menemukan tanda hubung non-pecah.

Tuan Lister

23

IE8 / 9 membuat tanda hubung tanpa putus yang disebutkan dalam jawaban CanSpice lebih lama dari tanda hubung biasa. Ini adalah panjang en-dash bukan tanda hubung khas. Perbedaan tampilan ini adalah masalah bagi saya.

Karena saya tidak dapat menggunakan jawaban CSS yang ditentukan oleh Deb, saya memilih untuk tidak menggunakan tag istirahat.

<nobr>e-mail</nobr>

Selain itu, saya menemukan skenario khusus yang menyebabkan IE8 / 9 rusak pada tanda hubung.

String berisi kata-kata yang dipisahkan oleh spasi yang tidak melanggar -  
Lebar terbatas
Berisi tanda hubung

IE menerjemahkannya seperti ini.

Contoh melanggar tanda hubung di IE8 / 9

Kode berikut mereproduksi masalah yang digambarkan di atas. Saya harus menggunakan tag meta untuk memaksa rendering ke IE9 karena IE10 telah memperbaiki masalah ini. Tidak ada biola karena tidak mendukung tag meta.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <meta charset="utf-8"/>
        <style>
            body { padding: 20px; }
            div { width: 300px; border: 1px solid gray; }
        </style>
    </head>
    <body>
        <div>      
            <p>If&nbsp;there&nbsp;is&nbsp;a&nbsp;-&nbsp;and&nbsp;words&nbsp;are&nbsp;separated&nbsp;by&nbsp;the&nbsp;whitespace&nbsp;code&nbsp;&amp;nbsp;&nbsp;then&nbsp;IE&nbsp;will&nbsp;wrap&nbsp;on&nbsp;the&nbsp;dash.</p>
        </div>
    </body>
</html>

mrtsherman
sumber

6

Menggunakan nobradalah cara yang paling lintas-browser dan bekerja secara independen dari font dan CSS. The nobrelemen tidak didefinisikan dalam spesifikasi HTML, tapi ini harus dianggap sebagai formalitas saja. Tetapi jika Anda harus menulis dengan spesifikasi HTML, maka jawaban Deb, menggunakan CSS, adalah pilihan terbaik.

Jukka K. Korpela

5

Saya ingin tahu mengapa Anda tidak dapat menggunakan solusi CSS.

Ryan Ahearn

2

@RyanAhearn - Saya menggunakan alat pihak ketiga yang tidak memberi saya banyak kontrol atas html. Itu tidak mendukung deklarasi tag inline.

mrtsherman

Alih-alih '' bisakah Anda tidak hanya menggunakan rentang dengan kelas dan mengendalikannya menggunakan CSS?

StephenESC

1

Perhatikan bahwa nobrtag ini tidak standar dan dapat rusak kapan saja. Dokumentasi MDN tidak merekomendasikan untuk menggunakan tag ini: developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr

Philipp

16

Anda juga dapat melakukannya "dengan cara joiner" dengan memasukkan " U+2060Word Joiner ".

Jika Accept-Charsetmemungkinkan, karakter unicode itu sendiri dapat dimasukkan langsung ke dalam output HTML.

Kalau tidak, itu bisa dilakukan menggunakan entitas encoding. Misalnya untuk bergabung dengan teks red-brown, gunakan:

red-&#x2060;brown

atau (setara desimal):

red-&#8288;brown

. Karakter lain yang dapat digunakan adalah " U+FEFFNol Tanpa ^{^Batas}Ruang " ^{^{[⁠ ⁠1]}} :

red-&#xfeff;brown

dan (setara desimal):

red-&#65279;brown

^{[1] : Perhatikan bahwa meskipun metode ini masih berfungsi di browser utama seperti Chrome, metode ini sudah tidak digunakan lagi sejak Unicode 3.2 .}

Perbandingan "the joiner way" dengan " U+2011Non-breaking Hyphen ":

Kata joiner dapat digunakan untuk semua karakter lain, bukan hanya tanda hubung.
Saat menggunakan kata joiner, sebagian besar penyaji akan merasterisasi teks secara identik . Di Chrome, FireFox, IE, dan Opera, rendering dari tanda hubung normal, misalnya:

abcdefghijklmnopqrstu-vwxyz

identik dengan rendering tanda hubung normal (dengan U + 2060 Word Joiner), mis:

a-⁠b-⁠c-⁠d-⁠e-⁠f-⁠g-⁠h-⁠i-⁠j-⁠k-⁠l-⁠m-⁠n-⁠o-⁠p-⁠q- ⁠R-⁠s-⁠t-⁠u-⁠v-⁠w-⁠x-⁠y-⁠z

sedangkan dua render di atas berbeda dari render " Non-breaking Hyphen ", misalnya:

a-b-c-d-e-f-g-h-i-j-k-l-m-n-o-p-q-r-s-t-u-v-w-x-y-y-y- z

. (Tingkat perbedaannya tergantung pada browser dan bergantung pada font. Misalnya ketika menggunakan deklarasi font " arial", Firefox dan IE11 menunjukkan variasi yang relatif besar, sedangkan Chrome dan Opera menunjukkan variasi yang lebih kecil.)

Perbandingan "cara bergabung" dengan (CSS .c1 {white-space:nowrap;}) dan :

Kata joiner dapat digunakan untuk situasi di mana penggunaan tag HTML dibatasi, misalnya bentuk situs web dan forum.
Pada spektrum presentasi dan konten , mayoritas akan menganggap kata joiner lebih dekat dengan konten, jika dibandingkan dengan tag.

^{• Seperti yang diuji pada Windows 8.1 Core 64-bit menggunakan:

    • IE 11.0.9600.18205

    • Firefox 43.0.4

    • Chrome 48.0.2564.109 (Pembuatan Resmi) m (32-bit)

    • Opera 35.0.2066.92}

Pacerier
sumber

Tampaknya "U + FEFF Zero Width No-break Space" tidak berfungsi dengan benar di IE11.

Ivan Gusev

Tampaknya "U + 2060" tidak berfungsi jika "-" diikuti oleh beberapa karakter unicode: seperti inibingo-⁠bongo

Ivan Gusev

Meskipun pers negatif konstan

JamesWilson

6

Terlambat ke pesta, tapi kupikir ini yang paling elegan. Gunakan karakter WORD JOINER Unicode & # 8288 ; di kedua sisi tanda hubung, atau tanda hubung, atau karakter apa pun.

Jadi, seperti ini:

&#8288;—&#8288;

Ini akan bergabung dengan simbol di kedua ujungnya ke tetangganya (tanpa menambahkan spasi) dan mencegah garis putus.

Eckstein
sumber

Saya bisa menjalankan ini dengan menggunakan ALT + 0173 (tanda hubung lunak) untuk beberapa alasan pada Windows 10.

pspahn

Tidak ada jeda baris setelah tanda hubung

Jawaban: