javascript - 有没有办法让表格单元格固定在给定高度并启用自动换行？

Question

我想在 map 上的不同位置放置房间标签。房间的高度可变，因此“高度”属性在每个房间标签的 JavaScript/React 代码中设置。

我的问题是，如果我希望单元格的高度不随着较长字符串的长度而扩展，我必须关闭自动换行。但是，我想换行，名字有很多行，只要不超过我设置的高度即可。

有没有办法做到这一点？这是我当前的设置，它只是拉伸(stretch)以显示整个字符串。

react :

return <div className={cx('roomLabelContainer')}
  style={{left: startX, top: startY, width: width, height: height}}>
  <table className={cx('roomLabel')}>
    {this.props.roomLabelName}
  </table>
</div>;

CSS:

.roomLabelContainer {
  display: table;
  margin: auto;
  overflow: hidden;
  position: absolute;
  table-layout: fixed;
}

.roomLabel {
    display: table-cell;
    line-height: 100%;
    margin: auto;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    word-wrap: break-word;
}

Answer 1

由于表格行不会遵守 max-height 属性(根据 W3C 规范)，一个可能的解决方案是将单元格内容包装在一个 div 中并使用它来约束行。

<td class="roomLabel"><div class="constrain">text...</div></td>

和 CSS

.constrain {
  position: relative;
  max-height: /* choose */;
  overflow: hidden;
}