How to have some words of a sentence italicize and keep the sentence stay in one line in HTML?

Question

I have the following HTML code:

<a href="https://www.nothing.com/link" style="font-size:42px;text-decoration:none; color: #FFFCFC;white-space:nowrap;">this is just a <i>test sentence</i></a> 

As you can see, I put in "white-space:nowrap" to ensure that the sentence stays on one line no matter the browser window size. However, it seems that italicizing some words in the sentence prevents this from happening. On smaller browser windows, the result is "this is just a" on one line and then "test sentence" on the next line. How do I make it so that the sentence always stay on one line?

Answer 1

You could try adding inline-block to the href which works at least in chrome

<a href="https://www.nothing.com/link" style="font-size:42px;text-decoration:none; color: red;white-space:nowrap;display:inline-block">this here is a very long is just a<span style="font-style: italic"> test sentence</span></a>

Answer 2

Italic does not cause line wrapping. The problem is in some part of a style sheet that was not disclosed in the question (the code posted does not demonstrate the problem). It might be a “killer CSS reset”, which really tends to mess things up. It might be something like * { white-space: normal }, which naturally causes normal line wrapping inside the i element, instead of letting it inherit white-space from its parent.

So you should clean up your use of CSS, preferably getting rid of “CSS resets”. Reset just the properties that really need to be reset.

Answer 3

I've had this problem as well in FF - identical situation.

The quickest fix is to set the font size to be a bit smaller e.g 90%.

I don't have any css resets either.