risposta-alla-domanda-sullo-sviluppo-web-bd.com

Nessuna interruzione di riga dopo un trattino

Sto cercando di impedire un'interruzione di riga dopo un trattino - caso per caso, 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 rompe e si avvolge alla riga successiva invece di trattarla come una parola completa ...

3-
3/8"

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

3-3/8”

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

Quanto segue è il mio doctype e 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" />

C'è un modo per impedire che si rompano le righe dopo il trattino? Non ho bisogno di alcuna soluzione che si applichi all'intera pagina ... è solo una cosa che posso inserire, se necessario, come un "carattere a larghezza zero senza interruzione", tranne uno che funziona.

Ecco una demo. Basta restringere la cornice finché la linea non si rompe al trattino.

http://jsfiddle.net/RagKH/

307
Sparky

Prova a usare il trattino non-breaking &#8209;. Ho sostituito il trattino con quel personaggio nel jsfiddle, ho ridotto il fotogramma il più piccolo possibile e la linea non si divide più.

541
CanSpice

Puoi anche racchiudere il testo pertinente con

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

IE8/9 rende il trattino non interrotto menzionato nella risposta di CanSpice più lungo di un trattino tipico. È la lunghezza di un trattino invece di un trattino tipico. Questa differenza di visualizzazione è stata per me un rompicapo.

Poiché non ho potuto utilizzare la risposta CSS specificata da Deb I, ho optato invece per non utilizzare tag di 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 - &nbsp;
  • La larghezza è limitata
  • Contiene un trattino

IE lo rende così.

Example of hyphen breaking in IE8/9

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

<!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>
21
mrtsherman

Puoi anche farlo "il modo di unire" inserendo " U+2060 Word Joiner ".

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

Altrimenti, può essere fatto usando la codifica dell'entità. Per esempio. per unire il testo red-brown, utilizzare:

red-&#x2060;brown

o (equivalente decimale):

red-&#8288;brown

. Un altro carattere utilizzabile è "U+FEFF Zero Larghezza Spazio non interrotto"[⁠ ⁠1]:

red-&#xfeff;brown

e (equivalente decimale):

red-&#65279;brown

[1] : Si noti che mentre questo metodo ancora funziona nei principali browser come Chrome, has stato deprecato da Unicode 3.2 .


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

  • Il joiner Word può essere utilizzato per tutti gli altri caratteri, non solo per i trattini.

  • Quando si utilizza il joiner Word, molti renderizzatori rasterizzeranno il testo identicamente . Su Chrome, FireFox, IE e Opera, il rendering dei trattini normali, 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

    è identico al rendering dei 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 sopra indicati differiscono dal rendering di " Trattino non frazionabile ", ad es .:

    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'estensione della differenza dipende dal browser e dipende dal tipo di carattere, ad esempio quando si utilizza una dichiarazione font di "arial", Firefox e IE11 mostrano variazioni relativamente grandi, mentre Chrome e Opera mostrano variazioni più piccole.)

Confronto tra "the joiner way" con <span class=c1></span> (CSS .c1 {white-space:nowrap;}) e <nobr></nobr>:

  • Il joiner di Word può essere utilizzato per situazioni in cui l'utilizzo di tag HTML è limitato, ad es. forme di siti Web e forum.

  • Nello spettro della presentazione e del contenuto , la maggioranza considererà il joiner Word più vicino al contenuto, se confrontato con i tag.


• Come testato su Windows 8.1 Core 64-bit utilizzando:
• IE 11.0.9600.18205
• Firefox 43.0.4
• Chrome 48.0.2564.109 (build ufficiale) m (32-bit)
• Opera 35.0.2066.92

15
Pacerier

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

Quindi, in questo modo:

&#8288;—&#8288;

Questo unirà il simbolo alle due estremità ai suoi vicini (senza aggiungere uno spazio) e impedirà la rottura della linea.

3
Eckstein