不破坏线和最大宽度

Question

我有一张桌子，它不能在任何td中断行。所有td都有max-width属性。

某些td文字长于最大宽度，我想将此文本“拆分”为此最大宽度，例如：

文字：“这是td中的文字”

适合td的文字：“这是”

这是我的代码：

.nobreaklineClass{
  white-space: nowrap;
}
.maxwidthClass{
  max-width: 30px;
}

<table>
  <tr class="nobreaklineClass">
    <td class="maxwidthClass">"this is the text in td" </td>
  </tr>
</table>

我该怎么做？

Answer 1

将overflow: hidden;添加到单元格中：

.nobreaklineClass{
    white-space: nowrap;
}
.maxwidthClass{
    max-width: 30px;
    border: 1px dotted #ddd;
    overflow: hidden;
}

<table>
  <tr class="nobreaklineClass">
      <td class = "maxwidthClass">"this is the text in td" </td>
   </tr>
 </table>

（我添加了一个虚线边框以使单元格大小清晰）

Answer 2

与约翰内斯类似，但有省略号：

＆＃13;

＆＃13;

.nobreaklineClass{
    white-space: nowrap;
}
.maxwidthClass{
    max-width: 80px;
    border: 1px dotted #ddd;
    overflow: hidden;
    text-overflow: ellipsis;
}

＆＃13;

<table>
 <tr class="nobreaklineClass">
  <td class = "maxwidthClass">this is the text in td</td>
 </tr>
</table>

＆＃13;

＆＃13;

＆＃13;