I added a rather large RSS icon plus a Google ad block to the top of my blog.
Problem is, when the headline of the first post on the page is long (especially when the font is set to “large” or “largest” in IE), then it runs right over the RSS icon and sometimes even the Google ad block. (The current headline you see at the top “The Ministry of Silly Counts” simply isn’t long enough to cause a problem, even when set to “largest.” But longer headlines do run into the RSS icon.)
In order to prevent this, I gave my headlines a maximum width:
That way, the headline breaks right before the word that would run into the RSS icon, and no collision occurs.
Understandably yet unfortunately, now the line break happens in every h2 headline on the page, not just in the first one on top. So if you scroll down the main page of my blog, for example the 4th post is headlined:
Be Fruitful and Join the
Unless your font is set to small, you’ll see that the headline breaks. Obviously, there’s no need for the line to break because there’s nothing it might run into.
(On the single post page of this very entry, of course, the line break is perfect, because otherwise the dinosaurs would run over my RSS icon.)
How can I give a maximum width ONLY to the first headline on the page and leave all other headlines unbroken?
- The topic ‘How to line-break ONLY the first headline on the page?’ is closed to new replies.