Zeilenumbruch in <td> -Tag

136

Ich möchte Text umbrechen, der einem <td>Element hinzugefügt wird . Ich habe es mit versucht style="word-wrap: break-word;" width="15%". Der Text wird jedoch nicht umbrochen. Muss es 100% breit sein? Ich muss andere Steuerelemente anzeigen, sodass nur 15% Breite verfügbar sind.

zool
quelle
1
Welchen HTML-Code verwenden Sie? Ist es <td> ein Text ... </ td> oder enthält Ihr TD ein <p> oder <span>? Auch wenn Sie sagen, dass es nicht umbrochen wird, wird der TD vermutlich breiter, wenn der Text länger als "15%" der Tabellenbreite ist.
Scunliffe
Mein HTML hat <td> dynamischen Text .. </ td> und was Sie über die TD-Erweiterung vermuten, ist absolut korrekt.

Antworten:

221

TD-Text umbrechen

Zuerst den Tischstil festlegen

table{
    table-layout: fixed;
}

Stellen Sie dann TD Style ein

td{
    word-wrap:break-word
}
Jitender Mahlawat
quelle
5
Ich nehme an, es wird nicht akzeptiert, weil es nicht in Chrom funktioniert ... :-( Irgendeine Lösung für Webkit?
MarcoS
4
Funktionierte perfekt für mich in Chrome.
Alejandro Riedel
17
Interessant ... In Chrome musste ich white-space: normalim td-Stil verwenden, damit die Verpackung funktioniert (anstelle der word-wrap:break-word)
Jim
3
Ich kann bestätigen, dass ich mit Jims Antwort die gleiche Erfahrung gemacht habe. Aus irgendeinem Grund reagiert Chrome nicht ohne daswhite-space:normal;
petrosmm
1
Verwenden white-space: pre-wrapSie diese Option, wenn Sie Leerzeichen beibehalten müssen.
Eicksl
47

HTML-Tabellen unterstützen einen CSS-Stil "Tabellenlayout: fest", der verhindert, dass der Benutzeragent die Spaltenbreiten an seinen Inhalt anpasst. Vielleicht möchten Sie es verwenden.

Alsciende
quelle
7
Ich habe diese Lösung versucht, aber sie scheint in Chrome nicht zu funktionieren. Ich habe eine Tabelle, die dynamisch mit einem Hyperlink gefüllt wird, der mehr als doppelt so breit wie die Zelle ist. 'Tabellenlayout: behoben' löst das Problem mit dem Strecken der Tabelle, umschließt den Text jedoch nicht. Stattdessen erstreckt es sich weiter rechts auf der Seite. Vermisse ich etwas
VOIDHand
30

Ich glaube, Sie sind auf den Haken 22 von Tischen gestoßen. Tabellen eignen sich hervorragend zum Einwickeln von Inhalten in eine tabellarische Struktur und eignen sich hervorragend zum "Dehnen", um den Anforderungen der darin enthaltenen Inhalte gerecht zu werden.

Standardmäßig werden die Tabellenzellen so gedehnt, dass sie zum Inhalt passen. Ihr Text macht ihn also nur breiter.

Es gibt einige Lösungen.

1.) Sie können versuchen, eine maximale Breite am TD festzulegen.

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

2.) Sie können versuchen, Ihren Text in ein Umbruchelement (z. B. einen Bereich) einzufügen und Einschränkungen festzulegen.

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

Beachten Sie jedoch, dass ältere IE-Versionen keine minimale / maximale Breite unterstützen.

Da der IE die maximale Breite nativ nicht unterstützt, müssen Sie einen Hack hinzufügen, wenn Sie ihn erzwingen möchten. Es gibt verschiedene Möglichkeiten, einen Hack hinzuzufügen. Dies ist nur eine.

Beim Laden der Seite erhalten Sie nur für IE6 die gerenderte Breite der Tabelle (in Pixel), dann 15% davon und wenden diese als Breite auf den ersten TD in dieser Spalte (oder TH, wenn Sie Überschriften haben) erneut in Pixel an .

scunliffe
quelle
Ich habe in beide Richtungen. Der Text kann jedoch nicht umbrochen werden. Ich benutze IE6.0
1
ah, IE6. Dies erhöht die Komplexität. Ich werde meine Antwort mit einem IE6-Hack überarbeiten.
Scunliffe
11

table-layout:fixedwird das Problem der expandierenden Zelle lösen, aber ein neues erstellen. IE versteckt standardmäßig den Überlauf, aber Mozilla rendert ihn außerhalb der Box.

Eine andere Lösung wäre zu verwenden: 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>
Costin
quelle
9

Dies funktionierte bei mir mit einigen CSS-Frameworks (Material Design Lite [MDL]).

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

td {
  word-wrap: break-word;
}
Alles ist gut
quelle
8

verwenden word-breakkann es ohne Styling verwendet werden , tableumtable-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>

ewwink
quelle
3

Das funktioniert wirklich gut:

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

Sie können für alle Ihre die gleiche Breite verwenden <divoder die Breite jeweils anpassen, um Ihren Text zu brechen, wo immer Sie möchten.

Auf diese Weise müssen Sie nicht mit festen Tabellenbreiten oder komplexen CSS herumspielen.

Betty Mock
quelle
1
Möglicherweise wollten Sie stattdessen CSS verwenden, aber Inline-Stile werden in modernem HTML im Allgemeinen vermieden, insbesondere wenn Sie dieselben Stile für jedes kopierte div immer wieder wiederholen.
TankorSmash
3

Ich hatte einige meiner tds mit:

white-space: pre;

Das hat es für mich gelöst:

white-space: pre-wrap;
MikeL
quelle
2

Um die Zellenbreite genau auf das längste Wort des Textes einzustellen, setzen Sie einfach die Breite der Zelle auf 1px

dh

td {
  width: 1px;
}

Das ist experimentell und ich habe es beim Ausprobieren erfahren

Live-Geige: http://jsfiddle.net/harshjv/5e2oLL8L/2/

Harte Vakharia
quelle
1

Es ist möglich, dass dies funktioniert, aber es könnte sich irgendwann in der Zukunft als störend erweisen (wenn nicht sofort).

<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>

Der Grund für das spanist, dass, wie von anderen hervorgehoben, a <td>typischerweise erweitert wird, um den Inhalt aufzunehmen, während a gegeben werden <span>kann - und erwartet wird, dass es eine festgelegte Breite behält; Das overflow: hiddensoll, kann aber nicht verbergen, was sonst dazu führen würde, dass sich das <td>ausdehnt.

Ich würde empfehlen, die titleEigenschaft des Bereichs zu verwenden, um den Text anzuzeigen, der in der visuellen Zelle vorhanden (oder abgeschnitten) ist, damit der Text noch verfügbar ist (und wenn Sie nicht möchten / brauchen, dass Personen ihn sehen, warum dann? in erster Linie denke ich ...).

Wenn Sie eine Breite für das td {...}td definieren, wird es erweitert (oder möglicherweise verkleinert, aber ich bezweifle es), um seine implizite Breite zu füllen (wie ich es sehe table-width/number-of-cells), scheint eine angegebene Tabellenbreite nicht zu erstellen das gleiche Problem.

Der Nachteil ist ein zusätzliches Markup, das für die Präsentation verwendet wird.

David sagt, Monica wieder einsetzen
quelle
1

Das Umbrechen von Text erfolgt automatisch in Tabellen. Der Fehler, den die Leute beim Testen begehen, besteht darin, hypothetisch eine lange Zeichenfolge wie "ggggggggggggggggggggggggggggggggggggggggggggggg" anzunehmen und sich darüber zu beschweren, dass sie nicht umwickelt wird. Praktisch gibt es kein so langes Wort auf Englisch, und selbst wenn es eines gibt, besteht eine schwache Chance, dass es darin verwendet wird <td>.

Versuchen Sie, mit Sätzen wie "Gegenposition ist unter bestimmten Umständen abergläubisch" zu testen.

John
quelle
Das ist richtig. Ich kann nicht verstehen, warum die Leute vorschlagen, "White-Space: Nowrap" zu verwenden, da dies genau das Gegenteil von dem bewirkt, was das OP will.
mluisbrown
29
Korrigieren Sie kein Wort auf Englisch, das so lang ist, aber nehmen Sie an, ich zeige einen Dateipfad an, der fortlaufend und sehr lang sein wird.
Krisp
2
..Oder eine lange durch Kommas getrennte Liste von Zahlen zum Beispiel, die leider keine Leerzeichen haben.
Aditya Sanghi
4
.. Oder ein langer Domainname, der bis zu 63 Zeichen umfassen kann (Erweiterung und www ausgeschlossen) http://www.abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijk.com/
Brainfeeder
Ich versuche dieses Problem zu lösen, wenn das "Wort" eine sehr lange URL ist. Der obige Kommentar mit dem Beispiel "ggggggggggggggggggggggggggggggggggggggggggggggggg" berücksichtigt keine langen URLs.
Geekandglitter
0

Wenden Sie Klassen auf Ihre TDs an, wenden Sie die entsprechenden Breiten an (denken Sie daran, eine davon ohne Breite zu belassen, damit der Rest der Breite angenommen wird), und wenden Sie dann die entsprechenden Stile an. Kopieren Sie den folgenden Code, fügen Sie ihn in einen Editor ein und zeigen Sie ihn in einem Browser an, damit er funktioniert.

<!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>
Elle
quelle
Ich glaube, dass das OP, obwohl es dies nicht ausdrücklich angibt, Probleme beim Umschließen von dynamischen Inhalten ohne Leerzeichen hat. In diesem Fall funktioniert die obige Lösung nicht - jsfiddle.net/qZrFW
user66001
-1
<!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>
Md Nazrul Islam
quelle