Non-breaking parentheses?

Question

In the footer of a flexible-layout website I've noticed that IE tends to line-wrap on parenthesis characters (in a phone number in this case). Is there a visually equivalent non-breaking parenthesis, in a similar vein to non-breaking spaces and non-breaking hyphens, that I can use instead?

Answer 1

Try this:

.phone{
    white-space: nowrap;
}

<p>Call Customer Support at <span class="phone">+34 (947) 12 34 56 78</span> for further enquiries.</p>

You can do many other things (from <nobr> tag to certain Unicode chars) but they aren't as cross-browser as this.

Answer 2

I ran into this issue with a plural treatment like "user(s)" where IE breaks the word after the R. You should be able to use the word joiner character (⁠), but in my test with IE11, only the deprecated zero-width non-breaking space character worked:

user(s)

Answer 3

I have had the same problem; here is a solution which worked:

The number to call is: (423) 276—0000

According to the Unicode Standard (specifically, UAX #14), a line break is not permitted before or after a no-break space. Therefore, the   prevents the browser from line-breaking on the parentheses. In either case, it doesn't hurt to have a space between the area code and the phone number.