C'è un modo per racchiudere le parole lunghe in un div?

173

So che Internet Explorer ha uno stile a capo automatico, ma vorrei sapere se esiste un metodo cross-browser per farlo con il testo in un div.

Preferibilmente anche i frammenti CSS ma JavaScript funzionerebbero bene.

modifica: Sì, riferendosi a corde lunghe, evviva gente!

css html word-wrap

— Rutherford
fonte

7

Il ritorno a capo automatico avviene per impostazione predefinita. Vuoi dire a capo quando non ci sono parole separate?

— Quentin,

313

Leggendo il commento originale, rutherford sta cercando un modo cross-browser per racchiudere il testo ininterrotto (dedotto dal suo uso della parola a capo automatico per IE, progettato per spezzare le stringhe ininterrotte).

/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

Ho usato questa classe per un po 'ora e funziona come un fascino. (nota: ho testato solo su FireFox e IE)

— Aaron Bennett
fonte

Vecchio post, ma non sembra rendere gli spazi quando IE è in modalità stranezze.

— Jeremy,

2

Sto usando Firefox 24.6.0, ed word-wrap: break-wordè quello che ha funzionato davvero.

— user545424,

3

Word-wrap: break-wordanche se creato da Microsoft fa ora parte dello standard CSS 3 ed è ciò che fa il trucco :-)

— Pascal_dher

38

La maggior parte della risposta precedente non ha funzionato per me in Firefox 38.0.5. Questo ha fatto ...

<div style='padding: 3px; width: 130px; word-break: break-all; word-wrap: break-word;'>
    // Content goes here
</div>

Documentazione:

— Paul Zahra
fonte

2

Grazie! questa è l'unica risposta che ha funzionato (word-break: break-all; è quello che ha funzionato per me)

— DaniCE

14

white-space: pre-wrap

quirksmode.org/css/whitespace.html

— NVI
fonte

4

collegamento morto. Fornisci una risposta più approfondita.

— JoshYates1980,

12

La soluzione di Aaron Bennet funziona perfettamente per me, ma ho dovuto rimuovere questa riga dal suo codice -> white-space: -pre-wrap;perché stava dando un errore, quindi il codice di lavoro finale è il seguente:

.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

Grazie mille

— Hugo
fonte

1

Aaron Bennett ha menzionato questa stessa risposta 2 anni prima di te. quello che hai fatto qui non aggiunge valore.

— AaA,

6

Ciao, come puoi vedere se leggi di nuovo entrambe le risposte, quello che sto dicendo è solo che la soluzione di Aaron è ok, ma ho riscontrato un errore in una delle righe che ha scritto, quindi l'ho cambiata con la soluzione per cui funzionava me. Forse dovrei avere un commento nella sua risposta, lo so, scusa e grazie

— Hugo

Ho dovuto aggiungere questo "spazio bianco: -pre-avvolgere" e ha funzionato :)

— Ravi Khambhati,

0

Come cita David, DIV fanno parole avvolgere per impostazione predefinita.

Se ti riferisci a stringhe di testo molto lunghe senza spazi, quello che faccio è elaborare la stringa sul lato server e inserire intervalli vuoti:

thisIsAreallyLongStringThatIWantTo<span></span>BreakToFitInsideAGivenSpace

Non è esatto in quanto vi sono problemi con il dimensionamento dei caratteri e simili. L'opzione span funziona se il contenitore ha dimensioni variabili. Se è un contenitore a larghezza fissa, potresti semplicemente andare avanti e inserire interruzioni di riga.

— DA.
fonte

@TomHert è davvero strano. Comunque, bene, IE. Non funziona mai Detto questo, questo è stato pubblicato 5 anni fa. CSS3 ora ha alcune migliori opzioni di a capo automatico che IE può ospitare developer.mozilla.org/en-US/docs/Web/CSS/word-wrap

— DA.

Sì, lo so, sono rimasto scioccato dalla semplicità di questa soluzione che ho dovuto provare :)

— Tom Hert,

0

Puoi provare a specificare una larghezza per il div, che sia in pixel, percentuali o em, e a quel punto il div rimarrà tale larghezza e il testo verrà automaticamente spostato quindi all'interno del div.

— Slevin
fonte

Prova a impostare una larghezza di 10 px ... e quindi usa una parola più lunga di 10 px

— Paul Zahra,