Spazio non collassante ma ancora (linea-) divisibile in HTML?

Question

Cosa posso usare in HTML se voglio avere uno spazio bianco nel mezzo della linea che assomiglia a tre spazi, ma può ancora essere interrotto se la linea diventa troppo lunga?

Lo spazio bianco normale viene compresso (una serie di spazi ha lo stesso aspetto di uno spazio singolo) e nello spazio non-breaking (& amp; nbsp) la linea non può essere interrotta.

Aggiorna : penso che ciò che voglio davvero sia un & # 65308; pre & # 65310; tag che può ancora spezzare le righe lunghe (ho bisogno di visualizzare il codice sorgente).

Answer 1

Che dire di uno o più spazi em (& amp; emsp;)? Concesso, ciò dipende dalla dimensione del carattere dell'utente. Se questo non funziona davvero nel tuo progetto, considera uno spazio (& Amp; ensp;).

Potresti anche voler guardare questa tabella di vari spazi su Wikipedia.

Answer 2

In realtà ho la risposta esatta che & # 8217; stai cercando. Ho cercato dappertutto questa risposta e niente di ciò che qualcuno ha suggerito ha funzionato perfettamente. Quindi, ho trovato una soluzione, l'ho provata e mi è stato detto che ha funzionato senza alcun difetto!

Garrow aveva effettivamente ragione (non ha semplicemente & # 8217; per spiegarlo o prenderlo fino in fondo ). La soluzione è invece di mettere   da solo, mettere &nbsp;<wbr>. Basta fare una semplice ricerca e sostituire e aggiungere il tag <wbr> dopo ogni <=>. Funziona perfettamente!

Il tag <=> è un tag poco noto supportato in tutti i principali browser che indica al browser di inserire una nuova riga SOLO se necessario.

Aggiornamento: ho trovato un browser che non & # 8217; t funziona esattamente in & # 8211; IE 8! Hanno effettivamente eliminato il tag <=>! Ho risolto questo problema creando una classe che dice:

.wbr:before { content: "\200B" }

e invece di sostituire <=> con <=>, sostituiscilo con il seguente:

&nbsp;<wbr><span class='wbr'></span>

In PHP, questo sarebbe simile:

$text = str_replace(" ","&nbsp;<wbr><span class='wbr'></span>", $text);

Don & # 8217; dimentica di aggiungere anche la classe.

Ovviamente questo sta diventando un po 'eccessivo, sostituendo un singolo spazio con tutto ciò, ma funziona esattamente come desiderato e dato che non ho mai visto il markup ha funzionato per me.

Se questo è troppo disordinato, un'altra soluzione è scambiare doppi spazi con un <=> seguito da uno spazio normale. Questo alternerà <=> e spazi normali e funzionerà nei miei test.

In PHP, questo sarebbe simile:

$text = str_replace("  ","  ", $text);

Spero che questo aiuti! Ho messo abbastanza ricerche su questo; Ho pensato di doverlo trasmettere.

Answer 3

Non funzionerà uno spazio tra due spazi non interrotti?

&

amp; nbsp; & Amp; nbsp;

Answer 4

Che ne dici di < wbr > ?

Answer 5

Se stai non ti rivolgi a IE (tranne 8, modalità standard):

<span style="white-space: pre-wrap">   </span>

Per IE, <span style="width:3ex"></span> funziona in modalità strane, quindi uniscile e ...

<span style="width:3ex;white-space:pre-wrap">   </span>

che sembra funzionare ovunque ho provato ... tranne gli standard IE7. D'oh!

Answer 6

Che ne dici di due   seguiti da uno spazio normale? L'unico svantaggio di ciò (per quanto ne so) è che se un'interruzione di linea cade naturalmente nello spazio normale, avrai un po 'di spazio finale sulla linea precedente a causa degli spazi non interrotti, ma io non non credo che farebbe mai la differenza nell'aspetto reale della pagina.

Answer 7

Potrebbe essere meglio fare un passo indietro e chiedere cosa stai cercando di renderizzare. Cosa significa questo spazio extra-largo?

Answer 8

dà 100px allo spazio sinistro tra il testo  esempio di spazi

span style = " margin-left: 100px; "

(n_n)