为什么在表格单元中绝对定位的元素要包装？

Question

请考虑以下内容：（ 实时演示）

HTML：

<table>
  <tbody>
    <tr>      
      <td class="col1">
        <button class="btn btn-small">Do Something</button> 
      </td>
      <td class="col2"></td>
    </tr>
    <tr>
      <td class="col1"></td>
      <td class="col2">
        <span style="position: relative">
          Text 
          <button class="btn btn-small" 
                  style="position: absolute; 
                         top: 0; 
                         left: 210px">
            Do Something
          </button>
        </span>
      </td>
    </tr>
  </tbody>
</table>

CSS：

tr {
  height: 100px;
}
td {
  border: 1px solid black;
}
.col1 {
  width: 150px;
}
.col2 {
  width: 200px;
}

为什么绝对定位的按钮要包装？

我可以通过以下方法解决它：

button {
  white-space: nowrap;
}

但我真的很想知道为什么要进行这种包装，以及是否有更好的方法来解决此问题。

Answer 1

在这种情况下，它将进行包装以避免溢出父容器。 它仍然溢出它，因为单个单词的时间太长，但是行为是尝试不使其溢出。 如果将演示更改为在其他按钮中包含更多文本，则超出表格单元格宽度后，它也会自动换行。

如果要避免这种情况，请使用white-space: nowrap 。