Zeilenumbruch in <td> -Tag

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.

TD-Text umbrechen

Zuerst den Tischstil festlegen

table{
    table-layout: fixed;
}

Stellen Sie dann TD Style ein

td{
    word-wrap:break-word
}

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.

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 .

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>

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

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

Credits zu http://www.blakems.com/archives/000077.html

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

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>

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.

Ich hatte einige meiner tds mit:

white-space: pre;

Das hat es für mich gelöst:

white-space: pre-wrap;

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/

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.

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.

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>

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