HTML TD wrap text
Je veux envelopper du texte qui est ajouté à un élément <td>. J'ai essayé avec style="Word-wrap: break-Word;" width="15%". Mais ce n'est pas envelopper le texte. Est-il obligatoire de lui donner 100% de largeur? J'ai d'autres commandes à afficher, donc seulement 15% de la largeur est disponible.
Pour envelopper le texte TD
Premier style de table
table{
table-layout: fixed;
}
puis définissez TD Style
td{
Word-wrap:break-Word
}
Les tableaux HTML prennent en charge un style CSS "table-layout: fixed" qui empêche l'agent utilisateur d'adapter la largeur des colonnes à son contenu. Vous voudrez peut-être l'utiliser.
Je crois que vous avez rencontré la capture 22 des tables. Les tableaux sont parfaits pour encapsuler du contenu dans une structure tabulaire et font un excellent travail d’étirement pour répondre aux besoins du contenu qu’ils contiennent.
Par défaut, les cellules du tableau s’étirent pour s’adapter au contenu ... ainsi, votre texte le rend plus large.
Il y a quelques solutions.
1.) Vous pouvez essayer de définir une largeur maximale sur le TD.
<td style="max-width:150px;">
2.) Vous pouvez essayer de placer votre texte dans un élément d'habillage (par exemple une étendue) et définir des contraintes sur celui-ci.
<td><span style="max-width:150px;">Hello World...</span></td>
Notez cependant que les anciennes versions de IE ne supportent pas min/max-width.
Puisque IE ne supporte pas nativement max-width, vous devrez ajouter un hack si vous voulez le forcer. Il y a plusieurs façons d'ajouter un hack, ce n'est qu'un.
Lors du chargement de page, pour IE6 uniquement, obtenez la largeur de rendu du tableau (en pixels), puis obtenez 15% de celle-ci et appliquez-la comme largeur au premier TD de cette colonne (ou TH si vous avez des en-têtes) à nouveau, en pixels.
table-layout:fixed résoudra le problème de la cellule en expansion, mais en créera un nouveau. IE par défaut masquera le débordement mais Mozilla le restituera hors du champ.
Une autre solution serait d'utiliser: 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;
}
Cela a fonctionné pour moi avec certains frameworks CSS (Material Design Lite [MDL]).
table {
table-layout: fixed;
white-space: normal!important;
}
td {
Word-wrap: break-Word;
}
Cela fonctionne vraiment bien:
<td><div style = "width:80px; Word-wrap: break-Word"> your text </div></td>
Vous pouvez utiliser la même largeur pour tous vos <div 'ou ajuster la largeur dans chaque cas pour casser votre texte où bon vous semble.
De cette façon, vous n'avez pas besoin de vous amuser avec des largeurs de table fixes ou des CSS complexes.
utiliser Word-break il peut être utilisé sans style table à table-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>Pour que la largeur de cellule soit identique à celle du mot le plus long du texte, définissez simplement la largeur de la cellule sur 1px
c'est à dire.
td {
width: 1px;
}
C’est expérimental et j’en suis venu à le savoir en faisant des essais et des erreurs
Violon vivant: http://jsfiddle.net/harshjv/5e2oLL8L/2/
Il est possible que cela fonctionne, mais cela pourrait s'avérer un peu gênant à l'avenir (si ce n'est immédiatement).
<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 raison d'être de la span est que, comme l'ont souligné d'autres personnes, un <td> se développera généralement pour accueillir le contenu, alors qu'un <span> pourra être donné et supposé conserver un ensemble. largeur; le overflow: hidden est destiné à, mais ne peut pas, masquer ce qui provoquerait autrement l'expansion du <td>.
Je vous recommande d'utiliser la propriété title de la plage pour afficher le texte présent (ou tronqué) dans la cellule visuelle, de sorte que le texte soit toujours disponible (et si vous ne souhaitez pas/ne souhaitez pas que les gens le voient) , alors pourquoi l’avoir en premier lieu, je suppose…).
De plus, si vous définissez une largeur pour le td {...}, le td s’agrandira (ou se contractera éventuellement, mais j'en doute) pour remplir sa largeur implicite (comme je le vois, cela semble être table-width/number-of-cells), La largeur de table spécifiée ne semble pas créer le même problème.
L'inconvénient est le balisage supplémentaire utilisé pour la présentation.
En fait, le wrapping du texte est automatique dans les tableaux. Les bévues que les gens commettent pendant les tests supposent hypothétiquement une longue chaîne comme "ggggggggggggggggggggggggggggggggggggggggggggggggggg" et se plaignent de ne pas s'enrouler. Pratiquement, il n’ya pas de mot en anglais qui soit aussi long et même s’il en existe, il y a une faible chance pour qu’il soit utilisé dans ce <td>.
Essayez de tester avec des phrases telles que "La contre-position est superstitieuse dans des circonstances prédéterminées".
<!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>
Appliquez des classes à vos TD, appliquez les largeurs appropriées (n'oubliez pas de laisser l'une d'elles sans largeur afin qu'elle assume le reste de la largeur), puis appliquez les styles appropriés. Copiez et collez le code ci-dessous dans un éditeur et affichez-le dans un navigateur pour le voir fonctionner.
<!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>