欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

在不擴展高度的情況下換行的Html表格單元格

CSS
錢瀠龍1年前8瀏覽0評論

我有下面的表格，我想為它設置由提供的尺寸確定的單元格高度和寬度。只要單元格內容不自動換行，它就能正常工作。在圖像中，第一行應該是20px高，但是橙色內容將行高擴展到了20px之外。如果空白被設置為nowrap(對于頂部/左側的單元格)，它會工作得很好。

然而，我想讓文本換行，但它應該在超出指定行高的地方被截斷(類似于文本超出寬度時向右截斷)。

這可能嗎？我怎樣才能做到呢？

enter image description here

<html>

<body>

<table cellspacing='0' cellpadding='0' style='display: table; table-layout: fixed; width: 200px'>

  <colgroup width='50'></colgroup>
  <colgroup width='50'></colgroup>
  <colgroup width='20'></colgroup>
  

  <tr style='height: 20px; overflow: hidden; white-space: nowrap;'>

    <td style='background-color: olive; display: table-cell; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;'>
      Very long text
    </td>

    <td style='background-color: orange; display: table-cell; overflow: hidden;'>
      <span style='white-space: normal;'>
        I want this text to wrap, yet not to expand the height of the cell/row
      </span>
    </td>

    <td style='background-color: steelblue; display: table-cell'>
      Fooo barrrr
    </td>

  </tr>

  <tr>
    <td style='background-color: aliceblue;'>
      <span>
        Blablub
      </span>
    </td>
    <td style='background-color: aqua;'>
      <span>
        Long text
      </span>
    </td>
    <td style='background-color: aquamarine; display: table-cell; overflow: hidden; white-space: nowrap;'>
      Another text
    </td>
  </tr>

</table>
</body>
</html>

更新

我已經有了一個解決方案，但是它需要在單元格中設置高度，這是我想要避免的(理想情況下，高度應該由& lttr & gt).I應用顯示:inline-block；高度:20px到橙色單元格的跨度:

<span style='white-space: normal; display: inline-block: height: 20px'>
        I want this text to wrap, yet not to expand the height of the cell/row
      </span>

# # # The的默認值覆蓋tr上的聲明。溢出聲明不被繼承，高度聲明等效于最小高度。

將這些聲明用于TD:display:block；身高:繼承；空白:正常；

這個例子展示了如何使用CSS來處理不推薦使用的HTML屬性cellspacing、cellpadding和width。您用于列組的寬度加起來是120px，但是表格是200px，所以瀏覽器必須計算如何擴展列組以適應。我在這個例子中代入了計算值。

table {
  table-layout: fixed;
  border-spacing: 0;
  width: 200px;
  }

td {
  padding: 0;
  }

colgroup {
  width: 83.33px;
  }

colgroup:nth-of-type(3) {
  width: 33.34px;
  }

<table>

  <colgroup></colgroup>
  <colgroup></colgroup>
  <colgroup></colgroup>
  

  <tr style='height: 20px; white-space: nowrap;'>

    <td style='background-color: olive; text-overflow: ellipsis; overflow: hidden;'>
      Very long text
    </td>

    <td style='background-color: orange; overflow: hidden; display: block; height: inherit; white-space: normal;'>
        I want this text to wrap, yet not to expand the height of the cell/row
    </td>

    <td style='background-color: steelblue;'>
      Fooo barrrr
    </td>

  </tr>

  <tr>
    <td style='background-color: aliceblue;'>
      <span>
        Blablub
      </span>
    </td>
    <td style='background-color: aqua;'>
      <span>
        Long text
      </span>
    </td>
    <td style='background-color: aquamarine; overflow: hidden; white-space: nowrap;'>
      Another text
    </td>
  </tr>

</table>