Search code examples
htmlgoogle-chromeword-wrap

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

My code:

<!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>

Here is the output in Firefox:

enter image description here

Here is the output in Chrome:

enter image description here

In Chrome, the content of the first column (0000-0000) has been broken into two lines. Why does Chrome do that when Firefox can render the table fine without breaking the content of first column?

How can I prevent Chrome from breaking the content of a table cell at hyphen?

Solution

  • Add white-space: nowrap; to the 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>