HTML表格单元格自动换行文本而不增加高度

huangapple
go评论54阅读模式
英文:

Html table cell to wrap text without extending height

问题

以下是您要翻译的内容：

"I have the following table for which I'd like to set cell heights and widths determined by provided dimensions. It works fine as long as the cell content does not wrap on its own. In the image, the first row is meant to be 20px high, but the orange content extends the row height beyond the 20px. It would work fine, if the 'white-space' was set to 'nowrap' (as for the top/left cell).

However, I would like the text to wrap, but it should be cut off where it would go beyond the designated row height (similar to how the text it cut off to the right when it would go beyond the width).

Is that possible and how would I be able to achieve that?"

Update:

"I've got somewhat of a solution, but it requires the height to be set in the cell itself which I'd like to avoid (ideally, the height should be set by <tr>). I applied display: inline-block; height: 20px to the span of the orange cell:

<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>
英文:

I have the following table for which I'd like to set cell heights and widths determined by provided dimensions. It works fine as long as the cell content does not wrap on its own. In the image, the first row is meant to be 20px high, but the orange content extends the row height beyond the 20px. It would work fine, if the white-space was set to nowrap (as for the top/left cell).

However, I would like the text to wrap, but it should be cut off where it would go beyond the designated row height (similar to how the text it cut off to the right when it would go beyond the width).

Is that possible and how would I be able to achieve that?

HTML表格单元格自动换行文本而不增加高度

&lt;html&gt;

&lt;body&gt;

&lt;table cellspacing=&#39;0&#39; cellpadding=&#39;0&#39; style=&#39;display: table; table-layout: fixed; width: 200px&#39;&gt;

  &lt;colgroup width=&#39;50&#39;&gt;&lt;/colgroup&gt;
  &lt;colgroup width=&#39;50&#39;&gt;&lt;/colgroup&gt;
  &lt;colgroup width=&#39;20&#39;&gt;&lt;/colgroup&gt;
  

  &lt;tr style=&#39;height: 20px; overflow: hidden; white-space: nowrap;&#39;&gt;

    &lt;td style=&#39;background-color: olive; display: table-cell; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;&#39;&gt;
      Very long text
    &lt;/td&gt;

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

    &lt;td style=&#39;background-color: steelblue; display: table-cell&#39;&gt;
      Fooo barrrr
    &lt;/td&gt;

  &lt;/tr&gt;

  &lt;tr&gt;
    &lt;td style=&#39;background-color: aliceblue;&#39;&gt;
      &lt;span&gt;
        Blablub
      &lt;/span&gt;
    &lt;/td&gt;
    &lt;td style=&#39;background-color: aqua;&#39;&gt;
      &lt;span&gt;
        Long text
      &lt;/span&gt;
    &lt;/td&gt;
    &lt;td style=&#39;background-color: aquamarine; display: table-cell; overflow: hidden; white-space: nowrap;&#39;&gt;
      Another text
    &lt;/td&gt;
  &lt;/tr&gt;

&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;

Update

I've got somewhat of a solution, but it requires the height to be set in the cell itself which I'd like to avoid (ideally, the height should be set by &lt;tr&gt;). I applied display: inline-block; height: 20px to the span of the orange cell:

      &lt;span style=&#39;white-space: normal; display: inline-block: height: 20px&#39;&gt;
        I want this text to wrap, yet not to expand the height of the cell/row
      &lt;/span&gt;

答案1

得分: 1

以下是您要翻译的内容：

默认情况下，td 的默认值会覆盖 tr 上的声明。溢出声明不会被继承，而高度声明等同于最小高度。

请使用以下声明来设置 td：display: block; height: inherit; white-space: normal;

此示例演示了如何使用 CSS 处理不推荐使用的 HTML 属性 cellspacing、cellpadding 和 width。您为 colgroup 使用的宽度总计为 120px，但表格宽度为 200px，因此浏览器需要计算如何扩展 colgroup 以适应。在此示例中，我替换了计算出的值。

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;'>
      非常长的文本
    </td>

    <td style='background-color: orange; overflow: hidden; display: block; height: inherit; white-space: normal;'>
        我希望这个文本换行，但不要增加单元格/行的高度
    </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>
        长文本
      </span>
    </td>
    <td style='background-color: aquamarine; overflow: hidden; white-space: nowrap;'>
      另一段文本
    </td>
  </tr>

</table>
英文:

The default values for td overrule the declarations on the tr. The overflow declaration is not inherited and the height declaration is equivalent to min-height.

Use these declarations for the td:<br>display: block; height: inherit; white-space: normal;<hr>

This example shows how to use CSS for the deprecated HTML attributes cellspacing, cellpadding, and width. The widths that you used for the colgroups add up to 120px but the table is 200px, so the browser has to calculate how to expand the colgroups to fit. I've substituted the calculated values in this example.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

td {
  padding: 0;
  }

colgroup {
  width: 83.33px;
  }

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

<!-- language: lang-html -->

&lt;table&gt;

  &lt;colgroup&gt;&lt;/colgroup&gt;
  &lt;colgroup&gt;&lt;/colgroup&gt;
  &lt;colgroup&gt;&lt;/colgroup&gt;
  

  &lt;tr style=&#39;height: 20px; white-space: nowrap;&#39;&gt;

    &lt;td style=&#39;background-color: olive; text-overflow: ellipsis; overflow: hidden;&#39;&gt;
      Very long text
    &lt;/td&gt;

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

    &lt;td style=&#39;background-color: steelblue;&#39;&gt;
      Fooo barrrr
    &lt;/td&gt;

  &lt;/tr&gt;

  &lt;tr&gt;
    &lt;td style=&#39;background-color: aliceblue;&#39;&gt;
      &lt;span&gt;
        Blablub
      &lt;/span&gt;
    &lt;/td&gt;
    &lt;td style=&#39;background-color: aqua;&#39;&gt;
      &lt;span&gt;
        Long text
      &lt;/span&gt;
    &lt;/td&gt;
    &lt;td style=&#39;background-color: aquamarine; overflow: hidden; white-space: nowrap;&#39;&gt;
      Another text
    &lt;/td&gt;
  &lt;/tr&gt;

&lt;/table&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月6日 08:06:57
  • 转载请务必保留本文链接：https://go.coder-hub.com/76410672.html
  • css
  • html
  • html-table
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定