Come word-break su un dash?

Question

Dato un 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 width di 150, e semplicemente avvolge per un newline il trattino?

Answer 1

Sostituire il trattini con questo:

­

Si chiama "soft" trattino.

div {
  width: 150px;
}

<div>
  12333&shy;2333&shy;233&shy;23339392&shy;332332323
</div>

Answer 2

In tutti i browser moderni^* (e in alcuni i vecchi browser, anche il <wbr> elemento è lo strumento perfetto per offrire l'occasione di rompere parole lunghe in punti specifici.

Citazione da quel link:

La Parola Pausa Opportunità (<wbr>) Elemento HTML che 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 altrimenti non creare una pausa in quella posizione.

Ecco come potrebbero essere utilizzati per l'OP esempio (o vederlo in azione JSFiddle):

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

^*Io l'ho testato in IE9, IE10, e le ultime versioni di Chrome, Firefox, Opera e Safari.

div {
  width: 150px;
}

<div>
  12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>

Answer 3

Come parte di CSS3, non è ancora pienamente supportato, ma si possono trovare informazioni su word-wrapping qui.Un'altra opzione è l' wbr tag, e nessuno dei quali sono pienamente supportato.

Answer 4

Il tuo esempio funziona come previsto in Google Chrome, Safari (Windows), e IE8.Il testo rompe il 150px casella in Firefox 3 Opera 9.5.

Inoltre ­ non lavorare per il tuo esempio, come sarà:

• lavoro quando interruzione di parola, ma quando non interruzione di parola non consente di visualizzare i trattini o

• lavoro, quando non interruzione di parola ma due trattini quando interruzione di parola in quanto aggiunge un trattino in pausa.

Answer 5

In questo caso specifico (in cui la stringa è andando a contenere i trattini) mi piacerebbe trasformare il testo di questo lato server:

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

Answer 6

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

Su di un trattino, il browser può word-break (con l'aggiunta di un trattino).Su una larghezza zero spazio, il tuo browser è in grado di interruzione di parola (senza aggiungere nulla).

Così, se il codice è qualcosa di simile a :

111111­222222­-333333​444444-​555555

allora il tuo browser mostra questo senza word-break :

1111112222222-33333334444444-5555555

e questo ogni possibile word-break :

111111-
222222-
-333333
444444-
555555

Basta scegliere l'opzione di cui hai bisogno.Nel tuo caso, potrebbe essere quello tra il 4s e 5s.

Answer 7

È inoltre possibile utilizzare :

word-break:break-all;

ex.

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

output:

abababababa
ababababbba
abbabbababa
ababb

word-break è di rompere tutti la parola o la linea anche se nessuno spazio nella frase che non piedi in larghezza o in altezza.dado per questo è necessario fornire una larghezza o altezza.

Answer 8

Il trattino unificatore funziona bene.

Entità HTML (decimale)

‑

Answer 9

Invece di - è possibile utilizzare ‐ o \u2010.

Inoltre, assicurarsi che il i trattini proprietà css è stato non set di nessuno (Il valore di default è manuale).

<wbr> non è supportato da Internet Explorer.

Answer 10

Speriamo che questo possa aiutare

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

Answer 11

È possibile utilizzare 0 larghezza spazio dopo il trattino:

div {
  width: 150px;
}

<div>
  12333-&#8203;2333-&#8203;233-&#8203;23339392-&#8203;332332323
</div>

se Si desidera che la linea di pausa prima di utilizzare il trattino ​- invece.