Non-breaking characters question

A proper replacement for <nobr>?

[Eschatonic]

Hi guys,

I'm looking for a general solution (if it exists) to a relatively simple problem, which is this:

I have some text which includes hyphens and periods, which I don't want to break onto multiple lines. I don't want to use the <nobr> tag, as it has long been deprecated. Let's use example-website.com as an example.

Now, the hyphens are easy enough to fix - there is a non-breaking hyphen character in Unicode. However, no such equivalent exists for periods. And ideally, I'd be interested in a general solution that doesn't involve me using loads of Unicode every time I want to include this type of string.

I suspect the answer may actually lie somewhere around creating a span and styling it, but I don't know what exact method would work (for example, AFAIK the white-space attribute doesn't handle anything other than spaces).

Any ideas?

[lucy24]

AFAIK the white-space attribute doesn't handle anything other than spaces

Funny you should say that, because it took me ages to --haha-- wrap my brain around the fact that it doesn't only apply to spaces. In fact it means "anything that would normally be wrappable will not wrap". In practice, it applies especially to hyphens and dashes.

An alternative is to make something like

pre.myclass {font-family: inherit;}

meaning that you keep the ordinary "pre" attributes, but put it in the same font as the surrounding text. Or, conversely, define your span as

{white-space: pre-wrap}

or any of the closely related [w3.org] variants.

The user's browser may or may not choose to override these settings if it results in a line that is wider than the available display area. Incidentally, I think breaking at periods when there is no following space is also browser-specific. You wouldn't normally see blahblah..
..blahblah or the like.

Sometimes there is an alternative. For instance, to make a list only as wide as it needs to be, define its width in ems.

Obligatory added boilerplate: Make sure you've accounted for users whose individual setup means that the text as coded won't fit.

[penders]

I don't want to use the <nobr> tag, as it has long been deprecated.

The <nobr> is not strictly deprecated, since it is a proprietary tag that has never been part of any standard. It is directly equivalent to the CSS

white-space:nowrap

, so should never be used in new markup.