Avvolgere il testo nel tag <td>

Voglio avvolgere del testo che viene aggiunto a un <td>elemento. Ci ho provato style="word-wrap: break-word;" width="15%". Ma non sta avvolgendo il testo. È obbligatorio dargli una larghezza del 100%? Ho altri controlli da visualizzare, quindi è disponibile solo la larghezza del 15%.

Per avvolgere il testo TD

Primo set di stile da tavolo

table{
    table-layout: fixed;
}

quindi impostare TD Style

td{
    word-wrap:break-word
}

Le tabelle HTML supportano uno stile css "layout di tabella: fisso" che impedisce all'agente utente di adattare le larghezze delle colonne al loro contenuto. Potresti volerlo usare.

Credo che tu abbia riscontrato la cattura di 22 tavoli. Le tabelle sono ottime per avvolgere i contenuti in una struttura tabulare e fanno un ottimo lavoro di "stiramento" per soddisfare le esigenze del contenuto che contengono.

Per impostazione predefinita, le celle della tabella si allungheranno per adattarsi al contenuto ... quindi il tuo testo lo renderà più ampio.

Ci sono alcune soluzioni.

1.) Puoi provare a impostare una larghezza massima sul TD.

<td style="max-width:150px;">

2.) Puoi provare a inserire il testo in un elemento a capo (ad es. Un intervallo) e impostarne dei vincoli.

<td><span style="max-width:150px;">Hello World...</span></td>

Tenere presente che le versioni precedenti di IE non supportano la larghezza min / max.

Poiché IE non supporta nativamente la larghezza massima, dovrai aggiungere un hack se vuoi forzarlo. Esistono diversi modi per aggiungere un hack, questo è solo uno.

Al caricamento della pagina, solo per IE6, ottieni la larghezza di rendering della tabella (in pixel), quindi ottieni il 15% di quella e applica quella come larghezza al primo TD in quella colonna (o TH se hai le intestazioni) di nuovo, in pixel .

table-layout:fixedrisolverà il problema di espansione della cella, ma ne creerà uno nuovo. IE per impostazione predefinita nasconderà l'overflow ma Mozilla lo renderà fuori dagli schemi.

Un'altra soluzione sarebbe quella di utilizzare: overflow:hidden;width:?px

<table style="table-layout:fixed; width:100px">
 <tr>
   <td style="overflow:hidden; width:50px;">fearofthedarkihaveaconstantfearofadark</td>
   <td>
     test
   </td>
 </tr>
</table>

.tbl {
    table-layout:fixed;
    border-collapse: collapse;
    background: #fff;
 }

.tbl td {
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
}

Crediti a http://www.blakems.com/archives/000077.html

Questo ha funzionato per me con alcuni framework css (material design lite [MDL]).

table {
  table-layout: fixed;
  white-space: normal!important;
}

td {
  word-wrap: break-word;
}

Utilizzare word-breakpuò essere utilizzato senza styling tablepertable-layout: fixed

table {
  width: 140px;
  border: 1px solid #bbb
}

.tdbreak {
  word-break: break-all
}

<p>without word-break</p>
<table>
  <tr>
    <td>LOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
  </tr>
</table>

<p>with word-break</p>
<table>
  <tr>
    <td class="tdbreak">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
  </tr>
</table>

Funziona davvero bene:

<td><div style = "width:80px; word-wrap: break-word"> your text </div></td> 

Puoi usare la stessa larghezza per tutti i tuoi <div , o regolare la larghezza in ogni caso per spezzare il testo dove preferisci.

In questo modo non devi scherzare con larghezze di tabella fisse o CSS complessi.

Ho avuto alcuni dei miei tdcon:

white-space: pre;

Questo mi ha risolto:

white-space: pre-wrap;

Per rendere la larghezza della cella esattamente uguale alla parola più lunga del testo, basta impostare la larghezza della cella su 1px

vale a dire

td {
  width: 1px;
}

Questo è sperimentale e ne sono venuto a conoscenza mentre lo facevo prove ed errori

Fiddle dal vivo: http://jsfiddle.net/harshjv/5e2oLL8L/2/

È possibile che ciò funzioni, ma potrebbe rivelarsi un po 'fastidioso ad un certo punto in futuro (se non immediatamente).

<style> 
tbody td span {display: inline-block;
               width: 10em; /* this is the nuisance part, as you'll have to define a particular width, and I assume -without testing- that any percent widths would be relative to the containing `<td>`, not the `<tr>` or `<table>` */
               overflow: hidden; 
               white-space: nowrap; }

</style>

...

<table>

<thead>...</thead>
<tfoot>...</tfoot>

<tbody>

<tr>

<td><span title="some text">some text</span></td> <td><span title="some more text">some more text</span></td> <td><span title="yet more text">yet more text</span></td>

</tr>

</tbody>

</table>

La logica di spanciò è che, come sottolineato da altri, una <td>volontà si espande in genere per adattarsi al contenuto, mentre a <span>può essere data - e ci si aspetta che mantenga - una larghezza prestabilita; il overflow: hiddenè destinato a, ma non potrebbe, nascondere ciò che altrimenti causare <td>ad espandersi.

Consiglio di usare la titleproprietà dell'intervallo per mostrare il testo presente (o ritagliato) nella cella visiva, in modo che il testo sia ancora disponibile (e se non vuoi / hai bisogno che le persone lo vedano, perché farlo in primo luogo, immagino ...).

Inoltre, se si definisce una larghezza per il td {...}td si espanderà (o potenzialmente si contrarrà, ma ne dubito) per riempire la sua larghezza implicita (come la vedo io sembra che siatable-width/number-of-cells ), una larghezza di tabella specificata non sembra creare lo stesso problema.

Il rovescio della medaglia è il markup aggiuntivo utilizzato per la presentazione.

Il wrapping del testo avviene automaticamente nelle tabelle. L'errore che le persone commettono durante il test è ipoteticamente assumere una lunga stringa come "ggggggggggggggggggggggggggggggggggggggggggggggggg" e lamentarsi che non si avvolge. Praticamente non c'è una parola in inglese che sia così lunga e anche se c'è, c'è una debole possibilità che venga usata all'interno di quel<td> .

Prova a testare con frasi come "La contrapposizione è superstiziosa in circostanze predeterminate".

Applica le classi ai tuoi TD, applica le larghezze appropriate (ricorda di lasciarne una senza larghezza in modo da assumere il resto della larghezza), quindi applica gli stili appropriati. Copia e incolla il codice seguente in un editor e visualizza in un browser per vederlo funzionare.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
td { vertical-align: top; }
.leftcolumn { background: #CCC; width: 20%; padding: 10px; }
.centercolumn { background: #999; padding: 10px; width: 15%; }
.rightcolumn { background: #666; padding: 10px; }
-->
</style>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="leftcolumn">This is the left column. It is set to 20% width.</td>
    <td class="centercolumn">
        <p>Hi,</p>
        <p>I want to wrap a text that is added to the TD. I have tried with style="word-wrap: break-word;" width="15%". But the wrap is not happening. Is it mandatory to give 100% width ? But I have got other controls to display so only 15% width available.</p>
        <p>Need help.</p>
        <p>TIA.</p>
    </td>
    <td class="rightcolumn">This is the right column, it has no width so it assumes the remainder from the 15% and 20% assumed by the others. By default, if a width is applied and no white-space declarations are made, your text will automatically wrap.</td>
  </tr>
</table>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Poem</th>
    <th>Poem</th>
  </tr>
  <tr>
    <td nowrap>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
    <td>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
  </tr>
</table>

<p>The nowrap attribute is not supported in HTML5. Use CSS instead.</p>

</body>
</html>