在前端开发中，HTML 表格是经常使用的元素之一。虽然表格可以让我们方便地展示数据，但有时候我们需要控制表格行内元素的布局。本文将介绍如何在一行上强制 HTML 表格行。
强制表格行内元素在一行显示
有时候，我们希望表格行内的元素不换行，而是在一行上完整地显示。比如，当表格中包含图片和文字时，我们可能希望它们在同一行内显示。为了实现这个效果，可以使用 CSS 的 white-space 属性。
-- -------------------- ---- -------
-------
----
----------------
-------- ----------------- ----------------
-----
--------
-------
-- -
------------ -------
-
--------上面的代码演示了如何在表格中将一段文本和一张图片放在同一行上。通过给表格单元格添加 white-space: nowrap; 样式，我们可以防止文字换行，并让它们和图片在同一行内显示。这种技巧对于表格中包含多个元素的情况同样适用。
强制表格行内元素换行
除了让表格行内元素在同一行上显示外，有时候我们也需要让它们换行。比如，当表格中的文字过长时，我们可能希望它能够自动换行，而不是撑破表格。
为了实现这个效果，可以使用 CSS 的 word-break 属性。
-- -------------------- ---- -------
-------
----
-----------------------------------------
-------- ----------------- ----------------
-----
--------
-------
-- -
----------- ----------
-
--------上面的代码演示了如何在表格中让一段过长的文字自动换行。通过给表格单元格添加 word-break: break-all; 样式，我们可以让文字在单元格宽度不足时自动换行。这种技巧同样适用于表格中包含多个元素的情况。
总结
通过使用 white-space 和 word-break 属性，我们可以控制 HTML 表格行内元素的布局。这些属性对于展示数据时非常有用，尤其是当表格中包含多个元素，并且我们想要精确地控制它们的显示方式时。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13311
