為什么在表格單元中絕對定位的元素要包裝？

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 。