Search code examples
csstwitter-bootstrapword-wrap

How to make a dash/hyphen not break a word in a table

I have a table with lots of columns where each one may wrap the line as it sees fit, except for the first column where I'd like NOT to wrap at all. The (what I think) problem is that the first line words typically look like this:

ABCDE-S01
SDFSD-X03
...

As you can see there is a dash close to the end and the line will always wrap just after this dash. How do I tell the table data tag not to wrap here but put it into one line. I tried word-wrap: normal but the same happens.

I should add that I'm using Bootstrap as CSS framework and the table definition looks like this:

<table class="table table-condensed table-hover table-striped">
Solution

  • Either you can replace the hyphen with a non-breaking hyphen, &#8209;, or you can style the cell using the CSS property white-space: nowrap which will prevent any type of line break from being automatically added.

    Bootstrap gives you the CSS class text-nowrap which contains the CSS property white-space: nowrap, so with Bootstrap you could, for example, add this class to the table cell:

    <td class="text-nowrap">ABCDE-S01</td>