Controlling the order of wrapping

[csdude55]

I have text that looks like this:

<b style="width: 320px">Blah blah blah</b>
<i>(foo bar)</i>

I don't REALLY define the width, it's just close to what's actually there.

On large screens, it looks like:

Blah blah blah (foo bar)

First, I want to make sure that if it wraps then it doesn't break in the middle of the <i> section, so I've done this:

<style>
.nowrap { white-space: nowrap }
</style>

<b class="nowrap" style="width: 320px">Blah blah blah</b>
<i class="nowrap">foo bar</i>

So on smaller screens I get:

Blah blah blah
(foo bar)

That works great, BUT! I have the site set so that the user can adjust the default font size, so the text inside of the <b> can possibly be greater than the width of the viewport.

Can you guys and gals suggest a way that I can make it break between </b></i> first if necessary, but then still wrap the text second inside if necessary?

[not2easy]

You could use something like

i.nobr { display: inline-block; }

and use <i class="nobr"> for the italics you do not want to wrap.

I would recommend testing common occurrences before using it though.

[csdude55]

So far so good! Thanks for the idea :-)

[lucy24]

Also remember the new HTML 5 markup <wbr> which means “you can break here if you need to”. It works just like the “soft” hyphen &shy; except that no hyphen is inserted.

[csdude55]

That would be a good idea, too, @lucy24, but maybe I'm not sure how it works. I did this:

<style>
article { width: 150px; border: 1px solid #800 }
</style>

<article>
 <b>Blah blah blah</b><wbr>
 <i>(foo bar)</i>
</article>

and it wrapped after "(foo" instead of keeping "(foo bar)" together.

Would I need to use it in conjunction with white-space: nowrap or display: inline-block?

[tangor]

unless I am missing something doesn't &nbsp; keep words together?

<i>(foo&nbsp;bar)</i> will never break (or shouldn't!

[lucy24]

Would I need to use it in conjunction with white-space: nowrap

Yes. A <wbr> overrides the nowrap. The CSS term "white-space" is misleading anyway, since it really means "anything that would normally be treated as breakable", like a dash or hyphen, not only \s spaces.

In my default css I have a
.locked {white-space: nowrap;}

But wait! The simple old-fashioned
&nbsp;
is exactly six bytes, so if you only want to prevent wrapping in one place, it is more efficient to use &nbsp; instead of throwing in the extra css--especially if you have to go the whole hog with
<span class = "locked">
instead of piggybacking on some existing markup like
<span class = "smallcaps locked">
or
<i class = "locked">

Of course you could also use the nonbreaking space character " " (opt-spc on the mac, presumably some convoluted alt-code on Windows, dunno about linux) which is just one byte. Personally I never do, because it's invisible in normal text editing. (I use &mdash; and &ndash; for similar reasons.)

[csdude55]

Ha! Now that's a nifty little trick I would have never considered, tangor :-) TIMTOWTDI

Thanks for the info, though, lucy and not2easy! I'm gonna keep those in my back pocket, but for this one I think using &nbsp; might be the way to go.

[Jonesy]

I often use &nbsp; to control the "esthetics" in the wrapping
of <h1>, etc.

[lucy24]

I often use &nbsp; to control the "esthetics" in the wrapping

Same here. If a header (such as a chapter title) ends in a short word, it gets an &nbsp; so if the whole thing has to wrap, at least there won’t be a lone “It” or “Up” dangling on a line by itself :)

[csdude55]

Curious, how does it affect search engines picking up keywords, etc?

[lucy24]

I do not want even to consider the possibility that a search engine does not know &nbsp; is a space. Are you thinking they might interpret “foo&nbsp;bar” as the single phrase "foo bar" without reference to "foo" and "bar" as separate words? Interesting line of thought--but probably only relevant if the pairing on a given site always has a &nbsp;

Hmmm.

[tangor]

The entity is a non breaking space, so it is always a space.

Pretty sure the search engines know this. :)