How to avoid wrapping text in CSS

Question

I have a new website I'm building and the CSS forces any text inside h2 tags to wrap whenever there is a space. Here's the site:

And here's the problem:

If I put "Low Fees" together without a space, and even add a few characters ("LowFeesABC"), it stays together and doesn't wrap. I don't know CSS well enough to know how to keep the text together. Any ideas?

Solution 1

It wraps because the element has a fixed width set on it and the text ”LOW FEES” does not fit into that width. Simply removing width:90px removes the wrapping.

Solution 2

#topPanel h2 {
    white-space: nowrap;
}

https://developer.mozilla.org/en-US/docs/CSS/white-space

Comments

[Scrimothy]

I can't help but see this post as an advertisement. Sorry if it's legitimate.

[HerrimanCoder]

It's not an ad, it's a CSS question. :-|

[KatieK]

@SweatCoder - Please put all of the relevant HTML and JS directly into your question. That way the code is present after you fix your problem, and this question will be useful to other people.

[Andy Brown]

It may have been a question, but it was an ad too! Hence -1.

[Jon Newmuis]

...just be careful because not all browsers render the same way. And not all users will have the font. And (if your website is translated) not all languages have the same length for the equivalent string. Spacing things exactly can be dangerous. Specify a width and use either overflow or text-overflow properties accordingly.

[Matt Ball]

@JonathanNewmuis I'm not really following here. There's not much "exact" in that CSS, aside from saying "don't allow line breaks in text."

[Jon Newmuis]

Sorry; to clarify, Matt's answer is absolutely correct (+1). However, based on a number of factors (mentioned above), if your force your text not to wrap, the text could very well go outside of the box that you're hoping it will stay within (which I'm guessing is not the desired behavior).