html - テーブルセルの最大高さを設定するにはどうすればよいですか？

Question

幅と高さが固定されたテーブルセルを取得しました。テキストが大きすぎる場合は、セルサイズは同じままで、テキストはoverflow：hiddenで非表示にする必要があります。

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

ただし、テキストが多すぎると、テーブルセルは100ピクセルを超えて拡張されます。それが拡大するのを防ぐためのトリックはありますか？

テキストは数行の長さである必要があるため、「white-space：nowrap」ソリューションは適用できません

Answer 1

CSS 2.1の規則により、テーブルセルの高さは「コンテンツに必要な最小の高さ」です。divしたがって、内部マークアップ（通常は要素（<td><div>content</div></td>））を使用して間接的に高さを制限し、要素heightにoverflowプロパティを設定する必要がありdivます（もちろん、設定せずdisplay: table-cellに、高さをCSS 2.1テーブルセルのルールに準拠させます）。

Answer 2

受け入れられた答えが実際に問題を完全に解決するとは思いません。vertical-align: middletable-cells コンテンツにが必要でした。ただし、テーブルセル内に div を追加して高さを指定すると、その内部 DIV のコンテンツが一番上になります。このjsfiddleを確認してください。オーバーフロー:hidden; 正常に動作しますが、コンテンツを短くして 1 行だけにすると、この行は垂直方向の中央に配置されません

解決策は、DIV を table-cell の内側ではなく外側に追加することです。コードは次のとおりです。

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

Answer 3

このようなことを試してください：-

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

Answer 4

以下のスタイルを使用してください。

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

HTMLは次のとおりです。

<div>
    your long text here
</div>

Answer 5

css では table-cells の最大高さを設定できず、空白の nowrap を使用すると最大幅でそれを壊すことができないため、解決策はすべてのブラウザーで動作する JavaScript です。

だから、これはあなたのために働くことができます.

Javascript を使用してテーブル内のすべてのセルまたは行の最大高さを制限する場合:

このスクリプトは、水平オーバーフロー テーブルに適しています。

このスクリプトは、テーブルの幅を毎回 300px ずつ増やし、行が max-height(160px) に縮小されるまで最大 4000px まで増やします。また、必要に応じて数値を編集することもできます。

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

ソース: HTML テーブル ソリューション テーブル幅を増やすことによる行またはセルの最大高さの制限、Javascript

Answer 6

これはあなたのニーズに合うでしょうか？

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

Answer 7

試す

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

Answer 8

これはあなたが望むものです：

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