Kısa çizgiden sonra satır sonu yok

340

-Tüm tarayıcılarla uyumlu, duruma göre temelli bir kısa çizgiden sonra satır sonunu önlemek istiyorum .

Misal:

Bu metin var: 3-3/8"hangi HTML'de bu: 3-3/8”

Sorun şu ki, bir satırın sonuna doğru, kısa çizgi nedeniyle, tam bir kelime gibi davranmak yerine bir sonraki satıra kırılıyor ve sarılıyor ...

3-
3/8"

Ben şanssız , "sıfır genişlik kırılma karakteri yok" eklemeyi denedim ...

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

Bunu Safari'de görüyorum ve tüm tarayıcılarda aynı olacağını düşünüyorum.

Aşağıdaki benim doctypeve karakter kodlama ...

<!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" />

Kısa çizgiden sonra bunların satır kesilmesini önlememin bir yolu var mı? Tüm sayfa için geçerli herhangi bir çözüme ihtiyacım yok ... sadece bir işe yaramaz dışında "sıfır genişlik kesme karakteri" gibi, gerektiği gibi ekleyebileceğim bir şey.

İşte bir Demo. Çizgi kısa çizgiye gelene kadar çerçeveyi daraltın.

http://jsfiddle.net/RagKH/

— Sparky
kaynak

@EricLeschinski, bu zaten bir cevap olarak gönderildi: stackoverflow.com/a/12362315/594235

— Sparky

Karakter seti = utf-8 ile - tire işareti

— koymayabilirsiniz

@QuentinUK, doğru ... kabul edilen cevap bu değil mi? ‑, kesilmez bir kısa çizgi.

— Sparky

& # 8209; sıradan ASCII olduğundan utf-8 gerekli değildir. Sayfanın utf-8 kodlaması ile gerçek karakterleri girmek mümkündür. - aynı göründüğü halde - ile aynı karakter değildir.

— QuentinUK

Yazdıklarınız için doğru HTML 3-3/8″veya olur 3-3/8″. Tırnak işaretleri asal değildir. Saf ASCII'de istiyorsanız, bunun yerine düz çift tırnak kullanın ( "). Tercihen, iyi, okunaklı bir metin olarak sunulacaksa, bunun yerine 33/8</style>″'3⅜ ″'

— Canned Man

579

Kırılmayan kısa çizgiyi kullanmayı deneyin ‑. Çizgiyi jsfiddle'ınızdaki bu karakterle değiştirdim, çerçeveyi gidebildiği kadar küçük büzüştüm ve çizgi artık bölünmüyor.

— CanSpice
kaynak

10

Bunun kırılmaz alan gibi bir şey olduğunu düşündüm, bu yüzden sadece 'kırılmaz çizgi' aradım ve burada sona erdi . :-)

— CanSpice

Ahhh ... Bir "ara karakteri yok" araması yaptım ve bununla duvara çarptım . Kırılmayan tek başına bir tire karakteri olduğu hiç aklıma gelmedi.

— Sparky

6

IE8 / 9'da bu karakter tipik bir tireden daha uzun oluşturur. Bir çizgi ile aynı boyutta görünüyor.

— mrtsherman

21

Sonucun normal bir tire işaretinden farklı olmasının nedeni, birçok yazı tipinin kesilmeyen tire içermemesidir. Bu, tarayıcıları farklı bir yazı tipi kullanmaya zorlar ve kesilmeyen tire, bu yazı tipindeki normal kısa çizgi ile aynı görünürken, farklı bir yazı tipindeki normal bir kısa çizgi ile eşleştiğinin garantisi yoktur.

— Jukka K. Korpela

5

Bence Deb'ın cevabı en iyisi.

— Ray Cheng

257

Ayrıca ilgili metni

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

— Deb
kaynak

17

Evet, bu kabul edilen bir imho'dan daha iyi bir cevap. Teşekkürler @Deb.

— CMH

38

@CMH, boşlukları (kullanıcının beyaz boşluk gördüğü boş yerler - hiçbir şey) sarmak istiyorsanız, ancak kelimeleri "e-posta" kelimesi gibi tirelerle bölmek istemiyorsanız yardımcı olmaz. Kabul edilen cevap bu durumda yardımcı olur

— xmojmr

12

Bu durumda yalnızca "e-posta" etrafında yayılma alanı kullanabilirsiniz.

— guirto

3

@CMH, bu da iyi çalışan bir cevap, bu yüzden oy verdim. Ancak, otomatik olarak bir sonraki satıra geçmeyecek bir karakter istediğim için bu cevabı kabul etmemeyi seçtim. Bir "bölünemez kısa çizgi" (gerçeği ‑) olabilir belirli tarayıcılarda düzenli tire biraz daha uzun hale bana önemsiz oldu.

— Sparky

11

@Sparky Farklı karakterler kullanmanın bir problemi, arama sonuçlarını karıştırmasıdır. Sayfada "3-3 / 8" i bulmaya çalışmak, kırılmaz kısa çizgiyi bulamaz.

— Bay Lister

23

IE8 / 9, CanSpice'in cevabında belirtilen kırılmayan tireyi tipik bir tireden daha uzun hale getirir. Tipik bir tire yerine en-tire uzunluğudur. Bu ekran farkı benim için bir anlaşma kırıcıydı.

Deb tarafından belirtilen CSS cevabını kullanamadığım yerine mola etiketleri kullanmayı seçmedim.

<nobr>e-mail</nobr>

Buna ek olarak, IE8 / 9'un kısa çizgi üzerinde bozulmasına neden olan belirli bir senaryo buldum.

Bir dize, kesilmeyen boşluklarla ayrılmış kelimeler içerir -  
Genişlik sınırlıdır
Bir tire içerir

IE bunu böyle yapar.

IE8 / 9'da kısa çizgi kırma örneği

Aşağıdaki kod, yukarıda gösterilen sorunu yeniden oluşturur. IE10 sorunu düzeltti gibi IE9 render render zorlamak için bir meta etiket kullanmak zorunda kaldı. Meta etiketleri desteklemediği için keman yok.

<!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
kaynak

6

Kullanmak nobren çapraz tarayıcı yoludur ve yazı tiplerinden ve CSS'den bağımsız olarak çalışır. nobrEleman HTML özellikleri tanımlı değil, ama bu sadece bir formalite olarak kabul edilmelidir. Ancak HTML özelliklerine göre yazmanız gerekiyorsa , Deb'in CSS kullanarak yanıtı en iyi seçenektir.

— Jukka K. Korpela

5

Neden CSS çözümünü kullanamayacağınızı merak ediyorum.

— Ryan Ahearn

2

@RyanAhearn - Bana html üzerinde fazla kontrol sağlamayan bir üçüncü taraf aracı kullanıyorum. Satır içi etiket bildirimlerini desteklemez.

— mrtsherman

'' yerine sadece bir sınıfla bir açıklık kullanmamış ve CSS kullanarak kontrol edebiliyor musunuz?

— StephenESC

1

Not nobretiketi, standart dışı ve herhangi bir zaman bozabilir. MDN belgeleri bu etiketi kullanmanızı önermez: developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr

— Philipp

16

" U+2060Word Joiner " ekleyerek bunu "marangoz yolu" da yapabilirsiniz .

İzin Accept-Charsetverirse, unicode karakterinin kendisi doğrudan HTML çıktısına eklenebilir .

Aksi takdirde varlık kodlaması kullanılarak yapılabilir. Örneğin, metne katılmak için şunu red-brownkullanın:

red-&#x2060;brown

veya (ondalık eşdeğeri):

red-&#8288;brown

. Başka bir kullanılabilir karakter " U+FEFFSıfır Genişlik ^{^Kesintisiz}Boşluk " ^{^{[⁠ ⁠1]}} :

red-&#xfeff;brown

ve (ondalık eşdeğeri):

red-&#65279;brown

^{[1] : Bu yöntem hala Chrome gibi büyük tarayıcılardaçalışırken, Unicode 3.2'den beri kullanımdan kaldırıldığını unutmayın .}

"Marangoz yolu" ile " U+2011Kesintisiz Kısa Çizgi " karşılaştırması:

Marangoz kelimesi sadece kısa çizgiler için değil, diğer tüm karakterler için kullanılabilir.
Marangoz kelimesini kullanırken, çoğu oluşturucu metni aynı şekilde rasterleştirir . Chrome, FireFox, IE ve Opera'da normal kısa çizgilerin oluşturulması, örn:

abcdefghijklmnopqrstu-vwxyz

normal kısa çizgilerin oluşturulmasıyla aynıdır (U + 2060 Word Joiner ile), örn:

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

yukarıdaki iki yorum, " Kesintisiz Kısa Çizgi " nin oluşturulmasından farklıdır , örn:

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

. ( arialFarkın kapsamı tarayıcıya ve yazı tipine bağlıdır. Örneğin, " " yazı tipi bildirimi kullanılırken , Firefox ve IE11 nispeten büyük varyasyonlar gösterirken, Chrome ve Opera daha küçük varyasyonlar gösterir.)

"Marangoz yolu" ile (CSS .c1 {white-space:nowrap;}) karşılaştırması :

Marangoz kelimesi HTML etiketlerinin kullanımının kısıtlandığı durumlarda, örneğin web sitesi ve forum formları için kullanılabilir.
Açık sunum ve içeriğin spektrumu , çoğunluk etiketleri ile karşılaştırıldığında, daha yakın içeriğe olmak marangoz kelimeyi dikkate alacaktır.

^{• Windows 8.1 Core 64-bit üzerinde aşağıdakiler kullanılarak test edildiği gibi:

    • IE 11.0.9600.18205

    • Firefox 43.0.4

    • Chrome 48.0.2564.109 (Resmi Derleme) m (32 bit)

    • Opera 35.0.2066.92}

— Pacerier
kaynak

IE11'de "U + FEFF Zero Width No-Break Space" düzgün çalışmıyor gibi görünüyor.

— Ivan Gusev

Görünüşe göre "U + 2060", "-" karakterini bazı unicode karakter izliyorsa çalışmıyor: böylebingo-⁠bongo

— Ivan Gusev

Sürekli olumsuz basına rağmen

— JamesWilson

6

Partiye geç, ama bence bu aslında en zarif. WORD JOINER Unicode karakterini kullan & # 8288 ; kısa çizginizin her iki tarafında veya kısa çizgi veya herhangi bir karakterde.

Yani, şöyle:

&#8288;—&#8288;

Bu, her iki uçtaki sembolü komşularına (boşluk eklemeden) birleştirir ve satır kesmesini önler.

— Eckstein
kaynak

Windows 10'da bir nedenden dolayı ALT + 0173 (yumuşak kısa çizgi) kullanarak bunu çalıştırabildim.

— pspahn