Geekology

How to keep spaces and dashes (hyphens) from breaking to a new line in HTML

In HTML table headers, cells, and other containers spaces or dashes (hyphens) within textual elements could become breakpoints.

This usually happens if the container or page layout is too small to fit all of the text on one line, but can be prevented by using either non-breaking spaces or non-breaking dashes:

Non-breaking spaces

The HTML Entity for a non-breaking space is " ":

<table>
  <tr>
    <td>
      This text could break to a new line.
    </td>
  </tr>
</table>

<table>
  <tr>
    <td>
      This&nbsp;text&nbsp;won't&nbsp;break&nbsp;to&nbsp;a&nbsp;new&nbsp;line.
    </td>
  </tr>
</table>

Non-breaking dashes (hyphens):

The HTML Entity for a non-breaking dash (hyphen) is "‑":

<table>
  <tr>
    <td>
      this-text-could-break-to-a-new-line.
    </td>
  </tr>
</table>

<table>
  <tr>
    <td>
      this&#8209;text&#8209;won't&#8209;break&#8209;to&#8209;a&#8209;new&#8209;line.
    </td>
  </tr>
</table>

Do you like this? Share it:

Tweet