it-swarm.com.de

HTML TD Text umbrechen

Ich möchte einen Text umbrechen, der einem <td> - Element hinzugefügt wird. Ich habe es mit style="Word-wrap: break-Word;" width="15%" Versucht. Der Text wird jedoch nicht umbrochen. Ist eine Breite von 100% obligatorisch? Ich muss andere Steuerelemente anzeigen, sodass nur eine Breite von 15% verfügbar ist.

118
sagar

Zu umbrechen TD text

Stellen Sie zuerst den Tischstil ein

table{
    table-layout: fixed;
}

dann setze TD Style

td{
    Word-wrap:break-Word
}
203

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

47
Alsciende

Ich glaube, Sie haben den Haken 22 der Tische getroffen. Tabellen eignen sich hervorragend zum Zusammenfassen von Inhalten in einer tabellarischen Struktur und eignen sich hervorragend zum "Strecken", um die Anforderungen des Inhalts zu erfüllen, den sie enthalten.

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

Es gibt einige Lösungen.

1.) Sie können versuchen, eine maximale Breite für den TD einzustellen.

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

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

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

Beachten Sie jedoch, dass ältere Versionen von IE nicht die minimale/maximale Breite unterstützen.

Da IE von Haus aus keine maximale Breite 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.

Rufen Sie beim Laden der Seite nur für IE6 die gerenderte Breite der Tabelle (in Pixel) ab, erhalten Sie dann 15% davon und wenden Sie diese als Breite auf die erste TD in dieser Spalte (oder =) an TH wenn Sie Überschriften haben) wieder in Pixel.

27
scunliffe

table-layout:fixed behebt das Problem mit den expandierenden Zellen, erstellt jedoch ein neues. IE standardmäßig wird der Überlauf ausgeblendet, aber Mozilla wird es außerhalb der Box rendern.

Eine andere Lösung wäre: 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>
11
Costin
.tbl {
    table-layout:fixed;
    border-collapse: collapse;
    background: #fff;
 }

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

Dank an http://www.blakems.com/archives/000077.html

10
Samuel Adam

Dies funktionierte für mich mit einigen CSS-Frameworks (Material Design Lite [MDL]).

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

td {
  Word-wrap: break-Word;
}
5

Das funktioniert wirklich gut:

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

Sie können die gleiche Breite für alle Ihre <div 's, oder passen Sie die Breite in jedem Fall an, um Ihren Text zu unterbrechen, wo immer Sie möchten.

Auf diese Weise müssen Sie nicht mit festen Tabellenbreiten oder komplexem CSS herumalbern.

3
Betty Mock

verwenden Word-break kann verwendet werden, ohne table bis 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>
2
ewwink

Um die Zellenbreite genau auf das längste Wort des Texts abzustimmen, setzen Sie die Zellenbreite einfach auf 1px

d.h.

td {
  width: 1px;
}

Dies ist experimentell und ich habe davon erfahren, während ich Versuch und Irrtum

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

2
Harsh Vakharia

Es ist möglich, dass dies funktioniert, aber es könnte sich zu einem späteren Zeitpunkt 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>

Das Grundprinzip für span ist, dass, wie von anderen hervorgehoben, ein <td> Normalerweise erweitert wird, um den Inhalt aufzunehmen, während ein <span> Angegeben werden kann und voraussichtlich beibehalten wird - eine festgelegte Breite; Der overflow: hidden soll, kann aber nicht verbergen, was andernfalls dazu führen würde, dass der <td> erweitert wird.

Ich würde empfehlen, die title -Eigenschaft des Bereichs zu verwenden, um den Text anzuzeigen, der in der visuellen Zelle vorhanden (oder abgeschnitten) ist, damit der Text weiterhin verfügbar ist (und wenn Sie nicht möchten/brauchen, dass andere Personen ihn sehen es, warum habe ich es dann zuerst, denke ich ...).

Wenn Sie eine Breite für td {...} Definieren, wird das td erweitert (oder möglicherweise verkleinert, aber ich bezweifle, dass dies der Fall ist), um die implizite Breite zu füllen (wie ich sehe, scheint dies table-width/number-of-cells Zu sein). scheint eine bestimmte Tabellenbreite nicht dasselbe Problem zu verursachen.

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

1
David Thomas

Der eigentliche Textumbruch erfolgt automatisch in Tabellen. Der Fehler, den die Leute beim Testen begehen, besteht darin, eine lange Zeichenfolge wie "ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg" anzunehmen und sich darüber zu beschweren, dass sie nicht umbricht. Praktisch gibt es kein Wort auf Englisch, das so lang ist, und selbst wenn dies der Fall ist, besteht eine geringe Wahrscheinlichkeit, dass es in diesem <td> Verwendet wird.

Versuchen Sie es mit Sätzen wie "Gegenposition ist unter vorherbestimmten Umständen abergläubisch".

1
John
<!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>
0
N Islam

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 übernommen wird), und wenden Sie dann die entsprechenden Stile an. Kopieren Sie den folgenden Code und fügen Sie ihn in einen Editor ein. Zeigen Sie ihn in einem Browser an, um die Funktion zu sehen.

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