non-breaking in-line elements

how to stop word-wrapping?

[Purple Martin]

I'm building an interaction for a page in a corporate intranet (IE only!).

I want to put a text input element in the middle of a sentence, so the user fills in the blank. The first letter of the missing word is written before the text input as a clue. In this example, the user should type "ebmaster":

"I love W[input] World".

I've specified the form to display inline so the text input appears where I want it.

BUT if the browser is resized smaller, the word-wrapping can sometimes split the first letter from the input:

"I love W
[input] World".

I've removed all whitespace from the code between W and the text input element, but it still wraps.

Is there some way I can prevent wrapping for a specified chunk of code (maybe using a span)?

[msr986]

Being that you are using IE, I would use the <nobr></nobr> tag.

This will do just what you need it to!

<nobr>I love W<input type="text"...> World</nobr>

[MonkeeSage]

Purple_Martin:

<div>This is a test of the <input type="text" value="" style="display: inline; width: 12%;"/> broadcasting system!</div>

Nice and squishy. ;)

Jordan

[Purple Martin]

msr986, that non-standard tag is perfect, thanks!

[pageoneresults]

You can also do this with CSS. Set up a generic class like so...

.nw{white-space:nowrap;}

<p class="nw">I love W<input type="text"...> World</p>

[Purple Martin]

pageoneresults, that's very neat. I can do it by setting an inline style for a span, and it's even cross-browser compatible if I even need to use it elsewhere.

I'm now keeping the "W" with the input like this:

I love <span style="white-space: nowrap;">W<input type="text"...></span> World