A capo automatico in una tabella HTML

Ho usato word-wrap: break-wordper avvolgere il testo in divs e spans. Tuttavia, non sembra funzionare nelle celle della tabella. Ho una tabella impostata su width:100%, con una riga e due colonne. Il testo in colonne, sebbene in stile con quanto sopra word-wrap, non va a capo. Fa sì che il testo passi oltre i limiti della cella. Questo succede su Firefox, Google Chrome e Internet Explorer.

Ecco come appare la fonte:

td {
  border: 1px solid;
}

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

La lunga parola sopra è più grande dei limiti della mia pagina, ma non si rompe con l'HTML sopra. Ho provato i suggerimenti seguenti per aggiungere text-wrap:suppresse text-wrap:normal, ma nessuno dei due ha aiutato.

Quanto segue funziona per me in Internet Explorer. Nota l'aggiunta dell'attributo table-layout:fixedCSS

td {
  border: 1px solid;
}

<table style="table-layout: fixed; width: 100%">
  <tr>
    <td style="word-wrap: break-word">
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>

<td style="word-break:break-all;">longtextwithoutspace</td>

o

<span style="word-break:break-all;">longtextwithoutspace</span>

Un colpo lungo, ma ricontrolla con Firebug (o simile) che non stai ereditando accidentalmente la seguente regola:

white-space:nowrap;

Ciò può ignorare il comportamento di interruzione di riga specificato.

Si scopre che non c'è un buon modo per farlo. Il più vicino a me è stato l'aggiunta di "overflow: nascosto;" al div attorno al tavolo e perdendo il testo. La vera soluzione sembra essere quella di abbandonare il tavolo però. Usando div e posizionamento relativo sono stato in grado di ottenere lo stesso effetto, meno l'eredità di<table>

AGGIORNAMENTO 2015: Questo è per quelli come me che vogliono questa risposta. Dopo 6 anni, funziona, grazie a tutti i collaboratori.

* { // this works for all but td
  word-wrap:break-word;
}

table { // this somehow makes it work for td
  table-layout:fixed;
  width:100%;
}

Come accennato, inserire il testo divquasi funziona. Devi solo specificare il widthdi div, che è una fortuna per i layout che sono statici.

Funziona su FF 3.6, IE 8, Chrome.

<td>
  <div style="width: 442px; word-wrap: break-word">
    <!-- Long Content Here-->
  </div>
</td>

Soluzione alternativa che utilizza overflow-wrap e funziona perfettamente con il layout normale della tabella + larghezza della tabella 100%

https://jsfiddle.net/krf0v6pw/

HTML

<table>
  <tr>
    <td class="overflow-wrap-hack">
      <div class="content">
        wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
      </div>
    </td>
  </tr>
</table>

CSS

.content{
  word-wrap:break-word; /*old browsers*/
  overflow-wrap:break-word;
}

table{
  width:100%; /*must be set (to any value)*/
}

.overflow-wrap-hack{
  max-width:1px;
}

Benefici:

• Utilizza overflow-wrap:break-wordinvece di word-break:break-all. Il che è meglio perché cerca prima di rompere gli spazi e interrompe la parola solo se la parola è più grande del suo contenitore.
• Non table-layout:fixedserve Usa il tuo dimensionamento automatico regolare.
• Non necessario per definire fisso widtho fisso max-widthin pixel. Definire %il genitore, se necessario.

Testato in FF57, Chrome62, IE11, Safari11

Cambia il tuo codice

word-wrap: break-word;

per

word-break:break-all;

Esempio

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-break:break-all;">longtextwithoutspacelongtextwithoutspace Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content</div>
    </td>
    <td><span style="display: inline;">Short Content</span>
    </td>
  </tr>
</table>

Problema con

<td style="word-break:break-all;">longtextwithoutspace</td>

è che non funzionerà molto bene quando il testo ha degli spazi, ad es

<td style="word-break:break-all;">long text with andthenlongerwithoutspaces</td>

Se la parola si andthenlongerwithoutspacesadatta alla cella della tabella in una riga ma long text with andthenlongerwithoutspacesnon lo fa, la parola lunga verrà spezzata in due, anziché essere racchiusa.

Soluzione alternativa: inserire U + 200B ( ZWSP ), U + 00AD ( trattino morbido ) o U + 200C ( ZWNJ ) in ogni parola lunga dopo ogni, diciamo, 20 ° carattere (tuttavia, vedere l'avviso seguente):

td {
  border: 1px solid;
}

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

Avvertenza : l'inserimento di caratteri aggiuntivi di lunghezza zero non influisce sulla lettura. Tuttavia, influisce sul testo copiato negli appunti (anche questi personaggi sono ovviamente copiati). Se il testo degli Appunti viene successivamente utilizzato in alcune funzioni di ricerca nell'app Web ... la ricerca verrà interrotta. Sebbene questa soluzione sia visibile in alcune note applicazioni Web, evita se possibile.

Avvertenza : quando si inseriscono caratteri aggiuntivi, non è necessario separare più punti di codice all'interno di grapheme. Vedi https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries per maggiori informazioni.

Dai un'occhiata a questa demo

   <table style="width: 100%;">
    <tr>
        <td><div style="word-break:break-all;">LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord</div>
        </td>
        <td>
            <span style="display: inline;">Foo</span>
        </td>
    </tr>
</table>

Ecco il link da leggere

Testato in IE 8 e Chrome 13.

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td>
              <div style="word-wrap: break-word;">
                 longtexthere
              </div>
        </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

In questo modo la tabella si adatta alla larghezza della pagina e ogni colonna occupa il 50% della larghezza.

Se preferisci che la prima colonna occupi più parte della pagina, aggiungi width: 80%a tdcome nell'esempio seguente, sostituendo l'80% con la percentuale di tua scelta.

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td style="width:80%">
               <div style="word-wrap: break-word;">
                 longtexthere
               </div>
            </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

L'unica cosa che deve essere fatta è aggiungere larghezza all'interno <td>o <div>in <td>base al layout che si desidera ottenere.

per esempio:

<table style="width: 100%;" border="1"><tr>
<td><div style="word-wrap: break-word; width: 100px;">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
<td><span style="display: inline;">Foo</span></td>
</tr></table>

o

 <table style="width: 100%;" border="1"><tr>
    <td width="100" ><div style="word-wrap: break-word; ">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
    <td><span style="display: inline;">Foo</span></td>

</tr></table>

La risposta che ha vinto la taglia è corretta, ma non funziona se la prima riga della tabella ha una cella unita / unita (tutte le celle hanno la stessa larghezza).

In questo caso dovresti usare i tag colgroupe colper visualizzarlo correttamente:

<table style="table-layout: fixed; width: 200px">
<colgroup>
    <col style="width: 30%;">
    <col style="width: 70%;">
</colgroup>
<tr>
    <td colspan="2">Merged cell</td>
</tr>
<tr>
    <td style="word-wrap: break-word">VeryLongWordInThisCell</td>
    <td style="word-wrap: break-word">Cell 2</td>
</tr>
</table>

<p style="overflow:hidden; width:200px; word-wrap:break-word;">longtexthere<p>

Sembra che sia necessario impostare word-wrap:break-word;un elemento a blocchi ( div), con la larghezza specificata (non relativa). Ex:

<table style="width: 100%;"><tr>
    <td><div style="display:block; word-wrap: break-word; width: 40em;">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</div></td>
    <td><span style="display: inline;">Foo</span></td>
</tr></table>

o usando word-break:break-allil suggerimento di Abhishek Simon.

Questo funziona per me:

<style type="text/css">
    td {

        /* CSS 3 */
        white-space: -o-pre-wrap;
        word-wrap: break-word;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
    }

E l'attributo table è:

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

</style>

Se non hai bisogno di un bordo della tabella, applica questo:

table{
    table-layout:fixed;
    border-collapse:collapse;
}
td{
    word-wrap: break-word;
}

Ho trovato una soluzione che sembra funzionare su Firefox, Google Chrome e Internet Explorer 7-9. Per fare un layout di tabella a due colonne con testo lungo su un lato. Ho cercato dappertutto un problema simile e ciò che ha funzionato in un browser ha rotto l'altro, o l'aggiunta di più tag a una tabella sembra solo una cattiva codifica.

NON ho usato una tabella per questo. DL DT DD in soccorso. Almeno per correggere un layout a due colonne, che è fondamentalmente una configurazione di glossario / dizionario / significato delle parole.

E un po 'di stile generico.

    dl {
        margin-bottom:50px;
    }

    dl dt {
        background:#ccc;
        color:#fff;
        float:left;
        font-weight:bold;
        margin-right:10px;
        padding:5px;
        width:100px;
    }

    dl dd {
        margin:2px 0;
        padding:5px 0;
        word-wrap:break-word;
        margin-left:120px;
    }

<dl>
    <dt>test1</dt>
    <dd>Fusce ultricies mi nec orci tempor sit amet</dd>
    <dt>test2</dt>
    <dd>Fusce ultricies</dd>
    <dt>longest</dt>
    <dd>
        Loremipsumdolorsitametconsecteturadipingemipsumdolorsitametconsecteturaelit.Nulla
        laoreet ante et turpis vulputate condimentum. In in elit nisl. Fusce ultricies
        mi nec orci tempor sit amet luctus dui convallis. Fusce viverra rutrum ipsum,
        in sagittis eros elementum eget. Class aptent taciti sociosqu ad litora
        torquent per conubia nostra, per.
    </dd>
</dl>

Usando il ritorno a capo mobile e il margine sinistro, ho ottenuto esattamente ciò di cui avevo bisogno. Ho pensato di condividere questo con gli altri, forse aiuterebbe qualcun altro con un layout in stile a due colonne, con difficoltà a mettere le parole a capo.

Ho provato a usare il ritorno a capo automatico nella cella della tabella, ma ha funzionato solo in Internet Explorer 9, (e ovviamente Firefox e Google Chrome) principalmente cercando di riparare il browser Internet Explorer rotto qui.

Le tabelle si avvolgono per impostazione predefinita, quindi assicurati che la visualizzazione delle celle della tabella sia table-cell:

td {
   display: table-cell;
}

style = "layout della tabella: fisso; larghezza: 98%; a capo automatico: parola spezzata"

<table bgcolor="white" id="dis" style="table-layout:fixed; width:98%; word-wrap:break-word" border="0" cellpadding="5" cellspacing="0" bordercolordark="white" bordercolorlight="white" >

Demo - http://jsfiddle.net/Ne4BR/749/

Questo ha funzionato alla grande per me. Avevo lunghi collegamenti che avrebbero portato la tabella a superare il 100% sui browser web. Testato su IE, Chrome, Android e Safari.

Una soluzione che funziona con Google Chrome e Firefox (non testata con Internet Explorer) è quella di impostare display: table-cell come elemento di blocco.

Puoi provare questo se ti va bene ...

Inserisci un'area di testo all'interno della tua td e disabilitala con il colore di sfondo bianco e definisci il suo numero di righe.

<table style="width: 100%;">
  <tr>
    <td>
        <textarea rows="4" style="background-color:white;border: none;" disabled>      Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </textarea>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>