@vfalconi I called the text node a label but I see how that leads to confusion. I'm not trying to achieve any new behavior for a label</code> tag, however. If that piece of text is confusing replace it with anything that can make sense. Here's another example:
<h3>
<span class="main-title-portion">There are few scenarios where these two lines</span>
<span class="secondary-title-portion">should be broken up into 2.</span>
</h3>Essentially, this is the same thing as my initial example. Because of design requirements I needed to create a line break on an inline element. And maybe I didn't go the display:block</code> route because I would only apply that rule for a specific screen size and drop it on bigger screen sizes. Or maybe that would create issues if I was trying to float an element. There are most likely other reasons one might need to do something like this.
@milesj Your code is wrong and invalid. You closed an h3</code> with an h2</code>.
Even though the W3 has dropped hgroup</code> from the spec, no one can be certain what will happen to that tag going forward. It is possible that it will come back but with a new specification.
Now, whether the content should be marked up differently is and should be determined by the content itself. I don't agree that these should be broken up into separate headers or that they ought to be li</code>s in a ul</code>. And no, I was not aiming for default ul</code> styles. Otherwise I would have done exactly that.
There are multiple use cases this can apply to. I had to do this on a header that was made up of an icon (floated left), a label (which was a countdown) and a secondary label (which was a message that came right after the countdown) hence the example above. And while I agree with the comments that there are different ways of accomplishing this type of display, this specific solution works well if you can not (or do not want to) change the default display</code> value of an element. And yes, you are right @vfalconi on guessing that this is for design purposes only because that was exactly the case for the project I had to do this on.
PPK on the subject: http://www.quirksmode.org/css/textoverflow.html
@dpashkevich That's a valid point. I don't think it will make a difference in this case. The main point of doing it this way is to not have to change the default display value of an inline element. In the example posted above I am placing the elements inside a block level element but you could very well do it inside another inline element.
@mattquirk Thanks! and thanks @dpashkevich for replying. It's important to note that other values of white-space</code> like pre-wrap</code> and pre-line</code> will yield a similar effect since they all handle \a</code> characters the same way.
@pe1999 To your point, there also a win when keeping RWD in consideration. Not having to add extra elements to show/hide for different screen sizes aids on page performance since you avoid unnecessary DOM elements added to the document.
@mikezarandona Are you setting the
display</code> property to something other than block</code> (for ul</code>s) or list-item</code> for li</code>s