如何防止 table 单元格内容被包裹在 Chrome 中的连字符中？

Question

我的代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Hello</title>
  </head>
  <body>
    <main style="border: thin solid gray; width: 20em">
      <table>
        <tr>
          <td>0000-0000</td>
          <td>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Aliquam eget diam ex.
          </td>
        </tr>
      </table>
    </main>
  </body>
</html>

这是 Firefox 中的输出：

这是 Chrome 中的输出：

在Chrome中，第一列（0000-0000）的内容被分成两行。当 Firefox 可以在不破坏第一列内容的情况下呈现 table 时，为什么 Chrome 会这样做？

如何防止 Chrome 在连字符处破坏 table 单元格的内容？

Answer 1

将 white-space: nowrap; 添加到 td

<!DOCTYPE html>
<html>
  <head>
    <title>Hello</title>
  </head>
  <body>
    <main style="border: thin solid gray; width: 20em">
      <table>
        <tr>
          <td style="white-space: nowrap;">0000-0000</td>
          <td>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Aliquam eget diam ex.
          </td>
        </tr>
      </table>
    </main>
  </body>
</html>

如何防止 table 单元格内容被包裹在 Chrome 中的连字符中？

How to prevent table cell content from being wrapped at hyphen in Chrome?

html

google-chrome

word-wrap