Wie stelle ich die maximale Höhe für die Tabellenzelle ein?

Ich habe eine Tabellenzelle mit fester Breite und Höhe und wenn der Text zu groß ist, sollte die Zellengröße gleich bleiben und der Text sollte durch Überlauf ausgeblendet werden: ausgeblendet.

div {
   display: table-cell
   height: 100px;
   width: 100px;
   overflow: hidden;
   vertical-align: middle;
}

Die Tabellenzelle wird jedoch über 100 Pixel erweitert, wenn zu viel Text hinzugefügt wird. Irgendwelche Tricks, um zu verhindern, dass es sich ausdehnt?

Der Text sollte mehrere Zeilen lang sein, daher ist die Lösung "Leerraum: Nowrap" nicht anwendbar

Nach den CSS 2.1-Regeln ist die Höhe einer Tabellenzelle „die vom Inhalt geforderte Mindesthöhe“. Daher müssen Sie die Höhe indirekt mithilfe des inneren Markups, normalerweise eines divElements ( <td><div>content</div></td>), und der Menge heightund overflowEigenschaften des divElements einschränken ( display: table-cellnatürlich ohne Einstellung , da dadurch die Höhe den CSS 2.1-Tabellenzellenregeln entspricht).

Ich glaube nicht, dass die akzeptierte Antwort das Problem tatsächlich vollständig löst. Sie wollten einen vertical-align: middleInhalt auf den Tabellenzellen haben. Wenn Sie jedoch ein Div in die Tabellenzelle einfügen und ihr eine Höhe geben, wird der Inhalt dieses inneren DIV oben angezeigt. Überprüfen Sie diese jsfiddle . Der Überlauf: versteckt; funktioniert gut, aber wenn Sie den Inhalt so kürzen, dass es nur eine Zeile ist, wird diese Zeile nicht vertikal zentriert

Die Lösung besteht nicht darin, einen DIV innerhalb der Tabellenzelle hinzuzufügen, sondern außerhalb. Hier ist der Code :

/* some wrapper */
div.d0 {
    background: grey;
    width:200px;
    height: 200px;
}

div.table {
    margin: 0 auto; /* just cosmetics */
    width: 150px;
    height: 150px;
    background: #eee;
    display: table;
}

div.tablecell {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
    height: 100%;
    width: 100%;
    background: #aaa;
}

div.outer-div {
    height: 150px;
    overflow: hidden;
}

<div class="d0">
    <div class="outer-div">
        <div class="table">
            <div class="tablecell">
                Lorem ipsum 
                <!--dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,-->
            </div>
        </div>
    </div>
</div> 

Sie können eine der folgenden Aktionen ausführen:

1. Verwenden Sie das CSS-Attribut "Zeilenhöhe" und legen Sie es pro Tabellenzeile () fest. Dadurch wird der Inhalt auch vertikal zentriert

2. Setzen Sie das CSS-Attribut "display" auf "block" und wie folgt:

td 
{
  display: block;
  overflow-y: hidden;
  max-height: 20px;
}

Viel Glück!

Versuchen Sie so etwas: -

 table {
    width: 50%;
    height: 50%;
    border-spacing: 0;
    position:absolute;
}
td {
    border: 1px solid black;
}
#content {
    position:absolute;
    width:100%;
    left:0px;
    top:20px;
    bottom:20px;
    overflow: hidden;
}

In CSS können Sie die maximale Höhe von Tabellenzellen nicht festlegen. Wenn Sie jetzt Leerzeichen verwenden, können Sie diese nicht mit maximaler Breite aufteilen. Daher besteht die Lösung darin, dass Javascript in allen Browsern funktioniert.

Das kann also für Sie funktionieren.

Zum Begrenzen der maximalen Höhe aller Zellen oder Zeilen in Tabellen mit Javascript:

Dieses Skript eignet sich für horizontale Überlauftabellen.

Dieses Skript erhöht die Tabellenbreite jedes Mal um 300 Pixel, maximal 4000 Pixel, bis die Zeilen auf die maximale Höhe (160 Pixel) verkleinert werden. Sie können auch Zahlen nach Bedarf bearbeiten.

var i = 0, row, table = document.getElementsByTagName('table')[0], j = table.offsetWidth;
while (row = table.rows[i++]) {
    while (row.offsetHeight > 160 && j < 4000) {
        j += 300;
        table.style.width = j + 'px';
    }
}

Quelle: HTML Table Solution Maximale Höhenbeschränkung für Zeilen oder Zellen durch Erhöhen der Tabellenbreite, Javascript

Verwenden Sie den folgenden Stil:

div {
  display: fixed;
  max-height: 100px;
  max-width: 100px;
  overflow: hidden;
}

Mit dem HTML-Wesen:

<div>
    your long text here
</div>

Wenn Sie display: table-cell verwenden, funktioniert die maximale Höhe für div dieses Stils nicht. Die Lösung, die für mich funktioniert hat, besteht darin, die maximale Höhe der inneren Teilung festzulegen

<div class="outer_div" style="display:table">

    <div class="inner_div" style="display:table-cell">
        <img src="myimag.jpg" alt="" style="max-height:300px;width:auto"/>
    </div>
    <div class="inner_div" style="display:table-cell">
        <img src="myimag2.jpg" alt="" style="max-height:300px;width:auto"/>
    </div>

</div>

Versuchen

   <td style="word-wrap: break-word">Long text here</td>

Könnte dies Ihren Bedürfnissen entsprechen?

<style>
.scrollable {
  overflow-x: hidden;
  overflow-y: hidden;
  height: 123px;
  max-height: 123px;
}
</style>

<table border=0><tr><td>
  A constricted table cell
</td><td align=right width=50%>
  By Jarett Lloyd
</td></tr><tr><td colspan=3 width=100%>
  <hr>
  you CAN restrict the height of a table cell, so long as the contents are<br>
  encapsulated by a `&lt;div>`<br>
  i am unable to get horizontal scroll to work.<br>
  long lines cause the table to widen.<br>
  tested only in google chrome due to sheer laziness - JK!!<br>
  most browsers will likely render this as expected<br>
  i've tried many different ways, but this seems to be the only nice way.<br><br>
</td></tr><tr><td colspan=3 height=123 width=100% style="border: 3px inset blue; color: white; background-color: black;">
  <div class=scrollable style="height: 100%; width: 100%;" valign=top>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
  </div>

Das ist, was du willst:

td {
   max-height: whatever;
   max-width: whatever;
   overflow: hidden;
}