Come avvolgere il testo in HTML?


185

Come può un testo simile a aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaasuperare la larghezza di un div(diciamo200px avvolgere )?

Sono aperto a qualsiasi tipo di soluzione come CSS, jQuery, ecc.

Risposte:


240

Prova questo:

div {
    width: 200px;
    word-wrap: break-word;
}

1
Sbaglio o la parola a capo è una proprietà CSS3?
Gab Royer,

13
È CSS3, ma funziona in quasi tutti i browser tradizionali, incluso IE5.5 -> 9 - caniuse.com/#search=word-wrap
Jon Hadley

32
Quando il ritorno a capo automatico: break-word; non funziona provare word-break: break-all; / * questo è un assassino * /
redochka il

@redochka Ma quando si utilizza word-break: break-all;quindi nel testo normale si spezzano le parole nel mezzo, il che è brutto ... Non possiamo avere un mix di entrambi i comportamenti?
pawamoy,

5
Importante: lo è word-break: break-alle non word-wrap: break-all. Facile errore da fare
Simon_Weaver

58

Su bootstrap 3, assicurati che lo spazio bianco non sia impostato come "nowrap".

div {
  width: 200px;
  word-break: break-all;
  white-space: normal;
}

Grande. Ho provato a usare word-break: break-all su un corpo del pannello Twitter Bootstrap 3 ma non ha mai funzionato. Aggiunta di spazi bianchi: la soluzione era normale.
coolboyjules,

5
Bene, ne avevo bisogno white-space: normal;anche prima che funzionasse.
Radbyx,

56

È possibile utilizzare un trattino morbido in questo modo:

aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa

Questo apparirà come

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

se la scatola contenente non è abbastanza grande, o come

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

se è.


18
Ma come fai a sapere dove mettere il ­?
Kostas,

Lo metti in parole lunghe dove possono essere divisi. Puoi persino ottenere tali informazioni automaticamente da un dizionario adatto.
Kim Stebel,

4
Ma che dire di incomprensibile come quello nell'esempio? E 'ok per trasformare aaaaaa...aaaaain a­a­a­a­a­a­a...a­a­a­a?
Kostas,

19
Esattamente quello che stavo cercando. Mi piace che sia troppo timido per fare qualsiasi cosa fino a quando non deve ;-)
w00t

3
funziona bene se la parola da racchiudere è un overly.long.java.package.name o una stringa simile con molti punti. quindi puoi aggiungere il & timido; dopo ogni punto.
dokaspar,

28
   div {
    // set a width
    word-wrap: break-word
}

La ' word-wrap' soluzione funziona solo con IE e con i browser supportati CSS3.

La migliore soluzione cross browser è quella di utilizzare il linguaggio lato server (php o altro) per individuare stringhe lunghe e posizionarle al loro interno a intervalli regolari l'entità html ​ Questa entità spezza bene le parole lunghe e funziona su tutti i browser.

per esempio

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa

8
"posiziona al loro interno a intervalli regolari l'entità html # 8203" ma poi quando provi a copiare il testo e incollarlo da qualche parte, avrai un carattere Unicode casuale nel mezzo
user102008

9

L'unico che funziona su IE, Firefox, Chrome, Safari e Opera se non ci sono spazi nella parola (come un lungo URL) è:

div{
    width: 200px;  
    word-break: break-all;
}

Ho trovato questo a prova di proiettile.


9

Questo ha funzionato per me

word-wrap: normal;
word-break: break-all;
white-space: normal;
display: block;
height: auto;
margin: 3px auto;
line-height: 1.4;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;

6

Un'altra opzione sta anche usando:

div
{
   white-space: pre-line;
}

Questo imposterà tutti i tuoi elementi div in tutti i browser che supportano CSS1 (che è praticamente tutti i browser più comuni fino a IE 8)


Se si dispone di un <pre>elemento che si desidera disporre del ritorno a capo automatico, questo funziona word-breako word-wrapmeno.
Plutone,

4

Cross Browser

.wrap
{
    white-space: pre-wrap; /* css-3 */    
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */    
    white-space: -o-pre-wrap; /* Opera 7 */    
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

2

Aggiungi questo CSS al paragrafo.

style="width:420px; 
min-height:15px; 
height:auto!important; 
color:#666; padding: 1%; 
font-size: 14px; 
font-weight: normal;
word-wrap: break-word; 
text-align: left" 

2
Mi piace text-overflow:ellipsistanto quanto il prossimo, ma non è una risposta corretta a questa domanda. Sta cercando di racchiudere la parola, non troncare lo straripamento.
Spudley,

1

Esempio dai trucchi CSS :

div {
    -ms-word-break: break-all;

    /* Be VERY careful with this, breaks normal words wh_erever */
    word-break: break-all;

    /* Non standard for webkit */
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Altri esempi qui .


0

Una soluzione lato server che funziona per me è: $message = wordwrap($message, 50, "<br>", true);dove si $messagetrova una variabile stringa contenente la parola / i caratteri da suddividere. 50 è la lunghezza massima di un determinato segmento ed "<br>"è il testo che si desidera inserire ogni (50) caratteri.


4
Questa soluzione non funzionerà se 50 volte la larghezza del carattere è superiore al massimo richiesto di 200 px. Usa semplicemente la funzione di zoom del tuo browser e alla fine lo vedrai spezzare ...
dokaspar

0

Prova questo

div{
  display: block;
  display: -webkit-box;
  height: 20px;
  margin: 3px auto;
  font-size: 14px;
  line-height: 1.4;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

la proprietà overflow del testo: i puntini di sospensione aggiungono ... e il line-clamp mostra il numero di righe.


0

Nel corpo HTML prova:

<table>
    <tr>
        <td>
            <div style="word-wrap: break-word; width: 800px">
                Hello world, how are you? More text here to see if it wraps after a long while of writing and it does on Firefox but I have not tested it on Chrome yet. It also works wonders if you have a medium to long paragraph. Just avoid writing in the CSS file that the words have to break-all, that's a small tip.
            </div>
        </td>
    </tr>
</table>

Nel corpo CSS prova:

background-size: auto;

table-layout: fixed;


0

Ho usato bootstrap. Il mio codice HTML sembra ..

<div class="container mt-3" style="width: 100%;">
  <div class="row">
    <div class="col-sm-12 wrap-text">
      <h6>
        text content
      </h6>
    </div>
  </div>
</div>

CSS

.wrap-text {
     text-align:justify;
}

Bootstrap ha text-justifyclasse, quindi puoi usarlo al posto di.wrap-text
barbsan il



-2

Utilizzare l' word-wrap:break-wordattributo insieme alla larghezza richiesta. Principalmente, inserisci la larghezza in pixel, non in percentuale.

width: 200px;
word-wrap: break-word;

14
Questo è identico alla risposta sopra. Perché preoccuparsi?
trgraglia,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.