Well… here’s the thing. I think your solution is really good – but it doesn’t work. :(
To be precise, it works in the fiddle but not in my code.
I’m actually not sure where I got the 100% width for the label, because it certainly isn’t anywhere in my original code, so I can only assume it was a leftover from one of the many attempts I made to make it work… although I have no idea why I would think a 100% width would be logical in this case. It may have been an attempt to address the rendering issue in the other browsers where the ‘More’ and the icon show on separate lines…
But back to the original problem. The inline-block is taking affect both on the ‘p’ and the label. And (as per the developer’s tools) the component width of the label is between 51 & 69px (size varies depending on the browser; remember that Opera & Chrome are still stacking the arrow and the text). But I guess my point is that the computed width is constrained enough to allow it to go beside the last line – it has room. But if I run it, it doesn’t work. It still shows on a separate line. And nothing in the computed rules suggest why this is happening. Everything seems fine there.
I scoured through my reset (I use a slightly modified version of Sanitize and Meyer), and nothing in there should be affecting the rendering of the label or the svg. I even tried disabling the
in case that was causing issues, but no effect. (In fact, I disabled the whole reset, and no change). I even changed the box-model to content-box to see if that would have an effect and nothing.
So it works in the fiddle, but not in the actual code…. but the computed details in the code are identical to those of the fiddle…. geeeeeez!
I even re-wrote this code snippet in Notepad++ and ran it. And it worked. Then I compared every single computed rule/style/component to the existing code, and they all matched!
I am completely at a loss. Any ideas of other properties that could be influencing this? I simply have no idea where else to look.
I keep thinking the fact that Opera’s and Chrome’s vertical rendering of the svg and the text is somehow relevant, but my brain hurts so I am not sure why I think this. Perhaps browser defaults are interfering? I’ve been working on this for the past 4 hours, ever since I read your response, and I’ll keep looking. But if you have any ideas that could point me in the right direction, I would appreciate it.