Welcome to WebmasterWorld Guest from 54.162.226.212

Forum Moderators: incrediBILL

Message Too Old, No Replies

Non-breaking characters question

A proper replacement for <nobr>?

     
3:15 pm on Oct 18, 2011 (gmt 0)



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?
8:13 pm on Oct 18, 2011 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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.
11:56 am on Oct 19, 2011 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month