1

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?

3 Answers3

1

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.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • Thanks, Jukka. Simon already answered my question to my satisfaction. I'm new to stackoverflow hence I did not know where the "accept answer" toggle was located until just now. Sorry if I wasted your time but I'm grateful regardless. –  Mar 19 '13 at 21:26
  • @jukka k. korpela - I disagree. The code posted did exhibit the problem for me in Chrome when entered directly in notepad - or using default jsfiddle HTML5 doctype. http://jsfiddle.net/wHWq2/. I had to add extra text to get it to fit the screen width, and change the color to red so I could read it, but nothing else. Any other thoughts? I'm curious too about a better solution – Simon_Weaver Mar 20 '13 at 18:03
  • @Simon_Weaver, on Chrome 26beta (Win 7), your jsfiddle shows the text on one line, as expected. – Jukka K. Korpela Mar 20 '13 at 21:31
  • well on Version 25.0.1364.172 (Win 7 or 2008) it doesn't - wierd. disabling extensions doesn't change anything. in IE9 it's on one line as expected. I don't know what's going on but I don't think the OP's additional css or reset was the conflict – Simon_Weaver Mar 21 '13 at 02:24
  • @Simon_Weaver, on your Chrome, does the line break occur before the `i` element, or inside it? – Jukka K. Korpela Mar 21 '13 at 05:39
  • @jukka k korpela - http://i.stack.imgur.com/DXgd5.png - this is taking the frame source from the jsfiddle and loading it in a blank window – Simon_Weaver Mar 21 '13 at 19:28
1

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.

Sam I am says Reinstate Monica
  • 30,851
  • 12
  • 72
  • 100
anoldermark
  • 366
  • 3
  • 8
0

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>
Simon_Weaver
  • 140,023
  • 84
  • 646
  • 689
  • Thanks, Simon. This worked like a charm! It also worked on Mozilla and IE. –  Mar 19 '13 at 19:23
  • 1
    This just removes a symptom caused by a problem that was not really described. There is no need for such extra styling when the code in the question is used without some additional CSS that causes the problem. – Jukka K. Korpela Mar 19 '13 at 21:58