Come posso mandare a capo o spezzare testo / parola lunghi in un intervallo di larghezza fissa?

104

Voglio creare un intervallo con una larghezza fissa che quando digito qualsiasi cosa nell'intervallo come <span>lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk</span>una lunga stringa di testo non spaziato, le parole si interrompono o vanno a capo alla riga successiva.

Qualche idea?

html css

— محمد کثیری
fonte

192

Puoi usare la proprietà CSS word-wrap:break-word;, che romperà le parole se sono troppo lunghe per la larghezza dell'intervallo.

span { 
    display:block;
    width:150px;
    word-wrap:break-word;
}

<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>

Espandi lo snippet

— Maxime Lorant
fonte

1

Funziona bene per il controllo dell'etichetta asp.net. Grazie!

— Etlds

41

L'aggiunta white-space: normalaiuta a sovrascrivere lo stile esterno che potrebbe intralciare :) .. inline-blockfunziona altrettanto beneblock

— Katia

Che ne dici di rompere due campate che si trovano all'interno di un elemento di blocco?

— Daniel Springer

Per coloro che hanno ancora problemi dopo aver usato questa risposta, assicurati di specificare una 'larghezza' altrimenti potrebbe non funzionare

— Staccato

Deve avere una larghezza per sapere dove rompere

— DFSFOT

40

Prova a seguire il CSS aggiungendo white-space:

span {
    display: block;
    word-wrap:break-word;
    width: 50px;
    white-space: normal
}

— Gerard de Visser
fonte

5

Grazie! Non riuscivo a capire perché il mio testo non andava mai a capo! lo spazio bianco era il motivo.

— mdiehl13

1

Il mio problema è stato risolto anche dopo aver inserito:white-space: normal

— majorBummer

Ecco una tabella di riferimento nel caso abbiate bisogno di spazi bianchi e wrapping: css-tricks.com/almanac/properties/w/whitespace

— Hritik

16

Come questo

DEMO

  li span{
    display:block;
    width:50px;
    word-break:break-all;
}

— Falguni Panchal
fonte

il mio amico che voglio quando metto la larghezza dello span: 50px; i valori nel mio intervallo vengono visualizzati solo in 50px e altri valori vanno alla riga successiva e mostrano in 50px !!!

— محمد کثیری

1

@ mamal10 Controlla la soluzione di Maxime Lorant.

— Mr_Green

3

Per impostazione predefinita a span è un inlineelemento ... quindi non è il comportamento predefinito.

Puoi fare in spanmodo che si comporti in questo modo aggiungendo display: block;al tuo CSS.

span {
    display: block;
    width: 100px;
}

1

Prova questo

span {
    display: block;
    width: 150px;
}

— Eswara Reddy
fonte

0

Giusto per estendere l'ambito pratico della domanda e come appendice alle risposte date: a volte potrebbe essere necessario specificare un po 'di più i selettori.

Definendo l'intero intervallo come display: inline-block potresti avere difficoltà a visualizzare le immagini.

Pertanto preferisco definire uno span in questo modo:

span {
  display:block;
  width:150px;
  word-wrap:break-word;      
}
p span, a span,
h1 span, h2 span, h3 span, h4 span, h5 span {
  display:inline-block;
}
img{
  display:block;
}

— leopold
fonte

0

Nel mio caso, display: block stava rompendo il design come previsto.

La max-widthproprietà mi ha appena salvato.

e per lo styling, puoi anche usare text-overflow: ellipsis.

il mio codice era

max-width: 255px
overflow:hidden

— sh6210
fonte