Come forzare un'interruzione di riga in una parola lunga in un DIV?

Ok, questo mi sta davvero confondendo. Ho un contenuto all'interno di un div in questo modo:

<div style="background-color: green; width: 200px; height: 300px;">

Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.

</div>

Tuttavia, il contenuto trabocca il DIV (come previsto) perché la "parola" è troppo lunga.

Come posso forzare il browser a "spezzare" la parola dove necessario per adattare tutto il contenuto all'interno?

Uso word-wrap:break-word;

Funziona anche in IE6, che è una piacevole sorpresa.

word-wrap: break-wordè stato sostituito con il overflow-wrap: break-word;quale funziona in ogni browser moderno. IE, essendo un browser morto, farà invece affidamento per sempre su quelli obsoleti e non standard word-wrap.

Gli usi word-wrapattuali di oggi funzionano ancora in quanto è un alias per overflow-wraple specifiche.

Non sono sicuro della compatibilità del browser

word-break: break-all;

Inoltre puoi usare il <wbr>tag

<wbr>(interruzione di parola) significa: "Se lo desideri, il browser può inserire un'interruzione di riga qui". Se il browser non ritiene necessaria un'interruzione di linea, non accade nulla.

Questo potrebbe essere aggiunto alla risposta accettata per una soluzione "cross-browser".

fonti:

• http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
• http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

.your_element{
    -ms-word-break: break-all;
    word-break: break-all;

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

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

Stavo solo cercando su Google lo stesso problema e ho pubblicato la mia soluzione finale QUI . È rilevante anche per questa domanda.

Puoi farlo facilmente con un div dandogli lo stile word-wrap: break-word(e potresti aver bisogno di impostarne anche la larghezza).

div {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
    width: 100%;
}

Tuttavia, per le tabelle , è inoltre necessario applicare: table-layout: fixed. Ciò significa che le larghezze delle colonne non sono più fluide, ma sono definite in base alle larghezze delle colonne solo nella prima riga (o tramite larghezze specificate). Leggi di più qui .

Codice di esempio:

table {
    table-layout: fixed;
    width: 100%;
}

table td {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
}

​è l'entità HTML per un carattere unicode chiamato spazio a larghezza zero (ZWSP) che è un carattere invisibile che specifica un'opportunità di interruzione di riga. Allo stesso modo lo scopo del trattino è quello di specificare un'opportunità di interruzione di riga all'interno di un limite di parole.

È emerso che l'utilizzo di quanto segue ha funzionato sulla maggior parte dei principali browser (Chrome, IE, Safari iOS / OSX) ad eccezione di Firefox (v50.0.2) quando si utilizza flexbox e si fa affidamento width: auto.

.your_element {
    word-wrap: break-word;   
    overflow-wrap: break-word;
    word-break: break-word;
}

Nota: potrebbe non essere necessario aggiungere i prefissi del fornitore del browser se non si utilizza un prefissatore automatico.

Un'altra cosa a cui prestare attenzione è che il testo utilizzato  per la spaziatura può causare interruzioni di riga a metà parola.

CSS word-wrap:break-word; , testato in FireFox 3.6.3

Ho risolto il mio problema con il codice qui sotto.

display: table-caption;

Rimuovi white-space: nowrap, se presente.

Strumento:

white-space: inherit;
word-break: break-word;

Lo spazio bianco è conservato dal browser. Il testo andrà a capo quando necessario e le interruzioni di riga

.pre-wrap {
    white-space: pre-wrap;
    word-break: break-word;
}

DEMO

td {
   word-break: break-word;
   white-space: pre-wrap;
   -moz-white-space: pre-wrap;      
}

table {
    width: 100px;
    border: 1px solid black;
    display: block;
}

<table>
<tr><th>list</th>
<td>
1.longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext
2.breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline
</td>
</tr>
</table>

Da MDN :

La overflow-wrapproprietà CSS specifica se il browser deve inserire o meno le interruzioni di riga all'interno delle parole per evitare che il testo trabocchi nella sua casella di contenuto.

Al contrario word-break, overflow-wrapcreerà un'interruzione solo se un'intera parola non può essere posizionata sulla propria riga senza traboccare.

Quindi puoi usare:

overflow-wrap: break-word;

Posso usare ?

Per prima cosa dovresti identificare la larghezza del tuo elemento. Per esempio:

#sampleDiv{
  width: 80%;
  word-wrap:break-word;
}

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

in modo che quando il testo raggiunge la larghezza dell'elemento, sarà suddiviso in righe.

Come indicato nella risposta di @ davidcondrey, non c'è solo la ZWSP, ma anche la SHY ­ ­che può essere usato in tempo molto lungo, le parole costruite (si pensi tedesco o olandese) che devono essere rotto sul posto che si desidera che sia. Invisibile, ma dà un trattino nel momento in cui è necessario, mantenendo così sia la parola connessa che la linea piena al massimo.

In questo modo si potrebbe notare la parola luchthavenpolitieagent in quanto lucht­haven­politie­agentindica parti più lunghe delle sillabe della parola.
Anche se non ho mai letto nulla di ufficiale, questi trattini morbidi riescono a ottenere una priorità maggiore nei browser rispetto ai trattini ufficiali nelle singole parole del costrutto ( se hanno qualche estensione per esso).
In pratica, nessun browser è in grado di spezzare una parola così lunga e costruita da sola; su schermi più piccoli con conseguente nuova linea per esso, o in alcuni casi anche una linea di una parola (come quando seguono due di quelle parole costruite).

Cordiali saluti: è olandese per agente di polizia aeroportuale

word-break: normale sembra meglio usare di word-break: break-word perché break-word rompe l'iniziale come EN

word-break: normal

Fai questo:

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

#sampleDiv{
   overflow-wrap: break-word;
}

prova questo nel nostro stile

white-space: normal;