HTML Table: Content with minus symbol breaks line in the column

Question

I'm facing the following problem: I have a field that has a mask, and in the end of the mask, there is a minus symbol. For example:

61.927.297/0001-20

However, when I take the minus symbol out, which of course, will be an invalid mask, the content of the table stays on the same line. Below is an image of what I have described:

Even if the data is bigger than the one on the image, the table will put it on the same line, only if there is no "-" on the mask.

Does anyone know why this happens? And what can I do to make it appear on the same line?

Answer 1

- is a hyphen in your sentence (the browser doesn't know if the content is a formula or proper prose), so the browser treats it as a new "word". Because the length of this line of text is too long for the table cell, it wraps onto a new line

You can use the CSS white-space property to set it not to wrap using nowrap:

td {white-space:nowrap;}

Compare the display of the two identical tables below:

td {
  width:30px;
  border:1px solid #000;
}

#table2 td {
  width:30px;
  border:1px solid #000;
  white-space:nowrap;
}

<table>
  <tr>
    <td>hello-world</td>
    <td>hello- world</td>
    <td>hello - world</td>
    <td>helloworld</td>
  </tr>
</table>

<table id="table2">
  <tr>
    <td>hello-world</td>
    <td>hello- world</td>
    <td>hello - world</td>
    <td>helloworld</td>
  </tr>
</table>

Answer 2

You can try using CSS rule "white-space: nowrap" on the columns which contains '-'