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

html tags

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

The HTML Entity for a non-breaking dash (hyphen) is “&#8209;“:

<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>
Mike The Situation

Mike The Situation

Geek Master at Geekology
Master of programming and general geekness.
Mike The Situation
About Mike The Situation
Master of programming and general geekness.

No Comments, Be The First!

Your email address will not be published.