Nessuna interruzione di riga dopo un trattino

340

Sto cercando di evitare un'interruzione di riga dopo un trattino -caso per caso che è compatibile con tutti i browser.

Esempio:

Ho questo testo: 3-3/8"che in HTML è questo: 3-3/8”

Il problema è che vicino alla fine di una riga, a causa del trattino, si interrompe e passa alla riga successiva invece di trattarla come una parola completa ...

3-
3/8"

Ho provato a inserire il carattere "zero width no break", senza fortuna ...

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

Lo vedo in Safari e penso che sarà lo stesso in tutti i browser.

Quanto segue è la mia doctypee la codifica dei caratteri ...

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

Esiste un modo per impedire che questi si interrompano dopo il trattino? Non ho bisogno di alcuna soluzione che si applichi all'intera pagina ... solo qualcosa che posso inserire in base alle esigenze, come un "carattere zero break-break a larghezza zero", tranne uno che funziona.

Ecco una demo. Basta restringere il riquadro fino a quando la linea non si interrompe sul trattino.

http://jsfiddle.net/RagKH/

— Sparky
fonte

@EricLeschinski, che è già stato pubblicato come risposta: stackoverflow.com/a/12362315/594235

— Sparky

Con charset = utf-8 puoi inserire - un trattino non

— spezzante

@QuentinUK, giusto ... non è già la risposta accettata? ‑è un trattino senza interruzioni.

— Sparky il

& # 8209; è normale ASCII, quindi utf-8 non è necessario. Con una codifica utf-8 della pagina è possibile inserire i caratteri effettivi. - non è lo stesso personaggio di - anche se sembra lo stesso.

— Quentin

L'HTML corretto per quello che hai scritto sarebbe 3-3/8″o 3-3/8″. Le citazioni non sono numeri primi. Se lo vuoi in puro ASCII, usa invece le virgolette doppie diritte ( "). Preferibilmente, se verrà presentato come un testo leggibile e valido, si utilizzerà invece 33/8</style>″, visualizzando '3⅜ ″'

— Canned Man

579

Prova a usare il trattino non-break ‑ . Ho sostituito il trattino con quel personaggio nel tuo jsfiddle, ho ridotto il riquadro il più piccolo possibile e la linea non si divide più lì.

— CanSpice
fonte

10

Ho pensato che fosse qualcosa di simile allo spazio non-break, quindi ho solo cercato un 'trattino non-break' e sono finito qui . :-)

— CanSpice

Ahhh ... Ho fatto una ricerca per "personaggio senza interruzioni" e ho colpito il muro con quello . Non mi è mai venuto in mente che esistesse un trattino autonomo che non si spezzasse.

— Sparky

6

In IE8 / 9 questo personaggio diventa più lungo di un trattino tipico. Sembra avere le stesse dimensioni di un trattino.

— Mrtsherman,

21

Il motivo per cui il risultato può differire da un normale trattino è che molti caratteri non contengono il trattino non interrotto. Ciò obbliga i browser a utilizzare un carattere diverso e, sebbene il trattino non interrotto appaia uguale al trattino normale in quel carattere, non vi è alcuna garanzia che corrisponda a un trattino normale da un carattere diverso.

— Jukka K. Korpela,

5

Penso che la risposta di Deb sia la migliore.

— Ray Cheng,

257

Puoi anche avvolgere il testo pertinente con

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

— debuttante
fonte

17

Sì, questa è una risposta migliore di quella accettata. Grazie @Deb.

— CMH,

38

@CMH questo non aiuta se vuoi avvolgere gli spazi bianchi (spazi vuoti in cui l'utente vede spazi bianchi - niente) ma non vuoi dividere le parole con trattini, ad esempio la parola "e-mail". La risposta accettata aiuta in questo caso

— xmojmr

12

In tal caso, puoi semplicemente utilizzare lo span solo intorno a "e-mail".

— guirto,

3

@CMH, questa è una buona risposta che funziona anche, quindi ho votato a favore. Tuttavia, ho scelto di non accettare questa risposta perché ho chiesto un personaggio che non si interrompesse automaticamente alla riga successiva. Il fatto che un "trattino senza interruzioni" ( ‑) potrebbe essere leggermente più lungo di un trattino normale in alcuni browser è stato per me banale.

— Sparky

11

@Sparky Un problema con l'utilizzo di caratteri diversi è che incasina i risultati della ricerca. Cercare di trovare "3-3 / 8" sulla pagina non troverà il trattino non-rottura.

— Lister

23

IE8 / 9 rende il trattino senza interruzioni menzionato nella risposta di CanSpice più a lungo di un trattino tipico. È la lunghezza di un trattino invece di un trattino tipico. Questa differenza di visualizzazione è stata una rottura per me.

Dato che non potevo usare la risposta CSS specificata da Deb, invece, ho optato per l'uso di tag senza interruzione.

<nobr>e-mail</nobr>

Inoltre, ho trovato uno scenario specifico che ha causato l'interruzione di IE8 / 9 su un trattino.

Una stringa contiene parole separate da spazi non interrotti -  
La larghezza è limitata
Contiene un trattino

IE lo rende così.

Esempio di rottura del trattino in IE8 / 9

Il codice seguente riproduce il problema nella foto sopra. Ho dovuto usare un meta tag per forzare il rendering su IE9 poiché IE10 ha risolto il problema. Nessun violino perché non supporta i metatag.

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

6

L'utilizzo nobrè il modo più cross-browser e funziona indipendentemente da font e CSS. L' nobrelemento non è definito nelle specifiche HTML, ma questo dovrebbe essere considerato solo come una formalità. Ma se devi scrivere con specifiche HTML, la risposta di Deb, usando CSS, è l'opzione migliore.

— Jukka K. Korpela,

5

Sono curioso di sapere perché non è possibile utilizzare la soluzione CSS.

— Ryan Ahearn,

2

@RyanAhearn - Sto usando uno strumento di terze parti che non mi dà molto controllo su HTML. Non supporta le dichiarazioni di tag in linea.

— sig.

Invece di "" non avresti potuto semplicemente usare un intervallo con una classe e controllarlo utilizzando il CSS?

— StephenESC,

1

Tieni presente che il nobrtag non è standard e potrebbe interrompersi in qualsiasi momento. La documentazione MDN non consiglia di utilizzare questo tag: developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr

— Philipp

16

Puoi anche farlo "alla maniera di joiner" inserendo " U+2060Word Joiner ".

Se lo Accept-Charsetconsente, il carattere unicode stesso può essere inserito direttamente nell'output HTML.

Altrimenti, può essere fatto utilizzando la codifica di entità. Ad esempio, per unire il testo red-brown, utilizzare:

red-&#x2060;brown

o (equivalente decimale):

red-&#8288;brown

. Un altro personaggio utilizzabile è " U+FEFFZero-No-break Space " ^{^{[⁠ ⁠1]}} :

red-&#xfeff;brown

e (equivalente decimale):

red-&#65279;brown

^{[1] : Nota che sebbene questo metodofunzioni ancora nei principali browser come Chrome, è stato deprecato a partire da Unicode 3.2 .}

Confronto di "the joiner way" con " U+2011Non-breaking Hyphen ":

La parola joiner può essere usata per tutti gli altri personaggi, non solo per i trattini.
Quando si utilizza la parola joiner, la maggior parte dei renderer rasterizza il testo in modo identico . Su Chrome, FireFox, IE e Opera, il rendering di trattini normali, ad esempio:

abcdefghijklmnopqrstu vwxyz-

è identico al rendering di trattini normali (con U + 2060 Word Joiner), ad esempio:

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

mentre i due rendering di cui sopra differiscono dal rendering di " Non-breaking Hyphen ", ad esempio:

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

. (L'entità della differenza dipende dal browser e dal tipo di carattere. Ad esempio, quando si utilizza una dichiarazione del carattere " arial", Firefox e IE11 mostrano variazioni relativamente enormi, mentre Chrome e Opera mostrano variazioni minori.)

Confronto di "the joiner way" con (CSS .c1 {white-space:nowrap;}) e :

La parola joiner può essere utilizzata per situazioni in cui l'uso di tag HTML è limitato, ad esempio forme di siti Web e forum.
Per quanto riguarda lo spettro di presentazione e contenuto , la maggioranza considererà la parola falegname più vicina al contenuto, rispetto ai tag.

^{• Testato su Windows 8.1 Core 64 bit usando:

    • IE 11.0.9600.18205

    • Firefox 43.0.4

    • Chrome 48.0.2564.109 (build ufficiale) m (32 bit)

    • Opera 35.0.2066.92}

— Pacerier
fonte

Sembra che "U + FEFF Zero Width No-break Space" non funzioni correttamente in IE11.

— Ivan Gusev,

Sembra che "U + 2060" non funzioni se "-" è seguito da un carattere unicode: in questo modobingo-⁠bongo

— Ivan Gusev

Nonostante la costante stampa negativa

— JamesWilson il

6

In ritardo alla festa, ma penso che questo sia in realtà il più elegante. Usa il carattere Unicode WORD JOINER & # 8288 ; su entrambi i lati del trattino, del trattino o di qualsiasi personaggio.

Quindi, in questo modo:

&#8288;—&#8288;

Ciò unirà il simbolo su entrambe le estremità ai vicini (senza aggiungere uno spazio) e impedirà l'interruzione della linea.

— Eckstein
fonte

Sono stato in grado di farlo funzionare usando ALT + 0173 (trattino morbido) per qualche motivo su Windows 10.

— pspahn