为什么空白：pre;打破表格内的表格html？

Question

我有一个datatable，并在最后一列的每个单元格中放置一个常规表格。我需要在这些表中准确显示数据，但我注意到如果两个单词之间有多余的空格，它会被删除，因此只有 1 个空格字符。

原来这是 HTML 行为，我找到了 this 解决方案以及 solution specific to Datatables。

但是，当我将 white-space:pre; 应用于数据表的 <td> 元素以便不会删除空格时，它会破坏我在表格上的 CSS：

与将white-space:pre; 添加到每个单元格之前的外观相比：

这里是重新创建问题的代码链接：https://jsfiddle.net/c4pjrs0L/4/

这是什么原因？具体来说，内表不再在顶部对齐，并且每个按钮都显示在新行上。

我真正想做的只是防止 html 修剪整个网站中单词之间的多余空格。

Answer 1

请在此处阅读pre 的工作原理：https://css-tricks.com/almanac/properties/w/whitespace/

我相信你错过了它的逻辑。

您的 CODE 中有几行代码，这些代码行受到 pre 的尊重，所以当您像这样放置按钮时：

table td {
  white-space:pre;
}

<table>    
    <td>
      <input type="button" value="btn1">
      <input type="button" value="btn2">
      <input type="button" value="btn3">
    </td>
</table>    

这将导致呈现 3 条单独的行。如果你这样做：

table td {
  white-space:pre;
}

<table>    
    <td><input type="button" value="btn1"><input type="button" value="btn2"><input type="button" value="btn3"></td>
</table>

它们都可以排成一行。

不确定您的主要问题是什么，因为我在您的小提琴上看不到它，但尝试使用其他一些空白属性，例如 nowrap（我在您的小提琴中尝试过，但没有看到任何问题）或如上所示调整 HTML。

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

编辑：

现在我知道你指的是什么空间了：

这不是在 HTML 中的单词之间添加空格的方式。使用：  或   或者您需要在 span 中标记您的姓名和姓氏并添加填充或边距。

https://jsfiddle.net/ikiK_Cro/eaL2gupn/7/