html - 为什么表格单元格中的绝对定位元素会换行？

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如果您想避免这种情况，请使用。