How to Prevent Line Break at Hyphens in All Browsers

How to prevent line break at hyphens in all browsers

I’m afraid there’s no simpler way to do it reliably than splitting the text to “words” (sequences of non-whitespace characters separated by whitespace) and wrapping each “word” that contains a hyphen inside nobr markup. So input data like bla bla foo-bar bla bla would be turned to bla bla <nobr>foo-bar</nobr> bla bla.

You might even consider inserting nobr markup whenever the “word” contains anything but letters and digits. The reason is that some browsers may even break strings like “2/3” or “f(0)” (see my page on oddities of line breaking in browsers).

No line-break after a hyphen

Try using the non-breaking hyphen ‑. I've replaced the dash with that character in your jsfiddle, shrunk the frame down as small as it can go, and the line doesn't split there any more.

HTML no line break at hyphens

Use the non-breaking hyphen: ‑

Stop wrapping of hyphenated text?

You can use the CSS attribute: white-space:nowrap; But note that it is not working all the time on some browser.

The other option is to wrap your link into a <pre> element but this approach can have some side effects as well.

HTML Tables - How to make IE not break lines at hyphens

You are looking for the white-space property, which affords you control over how white space and line-breaks affect the content of your element. To collapse white space sequences, but prevent line-breaks, you can use the nowrap value:

.dates {
    white-space: nowrap;
}

<td class="dates">2009-01-01</td>

Don't split hyphenated words

Replace all of your hyphens with Non-Breaking Hyphens. It's the same as the non-breaking space ( ) only it's a hyphen.

How to enable line break at hyphens on Firefox

Insert the <wbr> tag after the hyphen. This tag is not present in any HTML specification (yet—it is in HTML5 drafts), but it has worked for a long time in browsers.

Firefox automatically treats a hyphen as allowing a line break after it when there are sufficiently many characters around the hyphen. But if you wish to allow line breaks more widely than that, use <wbr>, e.g. pre-<wbr>war.

Keep words containing a dash (-) from breaking?

You can try something like white-space: nowrap;.

you can read more about it here

so you would add <span> and apply that to it.

.my--div {  width: 150px;  border: 1px solid;}
.my--span {  white-space: nowrap;  color: red;}

<div class="my--div">--TestCanvas-min-width--TestCanvas-min-width--TestCanvas-min-width<span class="my--span">--TestCanvas-min-width--</span>TestCanvas-min-width</div>