Come word-break su un trattino?

voti
60

Data una relativamente semplice CSS:

div {
  width: 150px;
}
<div>
  12333-2333-233-23339392-332332323
</div>

Come faccio a fare in modo che la stringa rimane vincolato al widthdi 150 , e semplicemente si dispone su una nuova riga sul trattino?

È pubblicato 04/08/2008 alle 01:17
fonte dall'utente
In altre lingue...                            


11 risposte

voti
63

Sostituire le trattini con questo:

&shy;

Si chiama un trattino "soft".

div {
  width: 150px;
}
<div>
  12333&shy;2333&shy;233&shy;23339392&shy;332332323
</div>

Risposto il 04/08/2008 a 01:25
fonte dall'utente

voti
31

In tutti i moderni browser * (e in alcuni vecchi browser , anche), l' <wbr>elemento è lo strumento ideale per fornire l'opportunità di rompere parole lunghe in punti specifici.

Per citare da quel link:

La Parola rottura Opportunity ( <wbr>elemento HTML) rappresenta una posizione all'interno del testo in cui il browser può eventualmente interrompere una riga, anche se le sue regole di interruzione di riga non avrebbero altrimenti creare un'interruzione in quella posizione.

Ecco come potrebbe essere usato per nell'esempio del PO (o vederlo in azione a JSFiddle ):

<div style="width: 150px;">
  12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>

* Ho provato a IE9, IE10, e le ultime versioni di Chrome, Firefox e Opera, e Safari.

div {
  width: 150px;
}
<div>
  12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>

Risposto il 30/01/2012 a 07:53
fonte dall'utente

voti
17

Come parte del CSS3, non è ancora pienamente supportata, ma si possono trovare informazioni sul word-wrapping qui . Un'altra opzione è la tag WBR, & shy ;, e & # 8203; nessuno dei quali sono pienamente supportati sia.

Risposto il 04/08/2008 a 01:25
fonte dall'utente

voti
8

In questo caso specifico (dove la stringa sta per contenere trattini) Mi piacerebbe trasformare il testo a questo server-side:

<div style="width:150px;">
  <span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span>
</div>
Risposto il 05/12/2008 a 13:36
fonte dall'utente

voti
8

Il vostro esempio funziona come previsto in Google Chrome, Safari (Windows), e IE8. Il testo rompe fuori dalla scatola 150px in Firefox 3 e Opera 9.5.

Inoltre &shy;non funziona per il vostro esempio, come sarà o:

  • lavorare quando la parola di rottura, ma quando non è la parola-rottura non visualizzare alcun trattini, o

  • lavoro quando non è parola di rottura, ma di visualizzazione due trattini quando la parola di rottura in quanto aggiunge un trattino in una pausa.

Risposto il 16/09/2008 a 00:15
fonte dall'utente

voti
7

A seconda di ciò che si vuole vedere esattamente, è possibile utilizzare una combinazione di hyphen, soft hyphene / o zero width space.

Su un trattino morbido, il browser può word-break (aggiungendo un trattino). Su uno spazio di larghezza pari a zero, il browser può rompere parola (senza aggiungere nulla).

Così, se il codice è qualcosa di simile:

111111&shy;222222&shy;-333333&#8203;444444-&#8203;555555

allora il browser mostrerà questo con nessuna parola-break:

1111112222222-33333334444444-5555555

e questo sarà ogni possibile parola-break:

111111-
222222-
-333.333
444444-
555555

Basta scegliere l'opzione che vi serve. Nel tuo caso, può essere quello tra 4s e 5s.

Risposto il 16/09/2010 a 10:04
fonte dall'utente

voti
1

È inoltre possibile utilizzare:

word-break:break-all;

ex.

<div style='width:10px'>ababababababbabaabababababababbabababa</div>

produzione:

abababababa
ababababbba
abbabbababa
ababb

word-break è rompere tutta la parola o la linea, anche se nessuno spazio nella frase che non piedini in larghezza o altezza prevista. Dado per questo è necessario essere fornire una larghezza o altezza.

Risposto il 27/08/2015 a 12:40
fonte dall'utente

voti
0

È possibile utilizzare 0 spazio larghezza dopo carattere trattino:

div {
  width: 150px;
}
<div>
  12333-&#8203;2333-&#8203;233-&#8203;23339392-&#8203;332332323
</div>

se vuoi interruzione di linea prima trattino utilizzare &#8203;-invece.

Risposto il 13/09/2018 a 10:21
fonte dall'utente

voti
0

Spero che questo può aiutare

utilizzare <br>tag (pausa) in cui si desidera interrompere la linea.

Risposto il 31/08/2017 a 10:53
fonte dall'utente

voti
0

Invece di -è possibile utilizzare &hyphen;o \u2010.

Inoltre, assicurarsi che il trattini proprietà css stato non impostato a none (Il valore predefinito è manuale ).

<wbr>non è supportato da Internet Explorer .

Risposto il 14/05/2015 a 04:29
fonte dall'utente

voti
0

Il trattino unificatore funziona bene.

HTML Entity (decimale)

&#8209;
Risposto il 21/03/2014 a 23:09
fonte dall'utente

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more