<span class=“date”>12 August 2011</span>
split into lines:
.date {
display:inline-block;
width:1px;
}
The text will overflow .date’s width still rendering, but it will break into multiple lines. does create flow issues though so it really depends on what you’re doing with them.
How interesting. What is it about inline-block that causes that behavior?
It lets you set a width. Display:block will have the same effect.
While display:inline lets you set side-padding and it obeys, width on inlines is ignored.
Someone made a very useful comment : instead of using the TITLE attribute I should be using the HTML5 data- custom attributes !! I love this idea
Didn’t realise you wanted a Javascript solution. That’s what data-* attributes are for: local hooks for Javascript to grab name-value pairs.
Or did you mean using CSS to grab the data attribute?
yes I meant using CSS to grab the content of the data- attribute
Definitely no javascript wanted here 
Ah. I saw that in a comment to Chris Coyer’s “responsive data tables” article/experiment, and kept it in mind… and in your case, the browsers who don’t understand data-foo/content(attr) are the same ones not doing @media stuff anyway.
Since you have the real text somewhere too (and not display: none) you’re also cool with screen readers… recently heard VO started speaking CSS content but traditionally stuff created with :before and :after and “content” were invisible/silent.
Interesting, I’ve planned a visually-pleasing fallback for old browsers but I didn’t know they were the exact same that didn’t support media-queries.
You’re right about accessibility, that’s one of the reasons why I wanted to do it in a clean way like this. Worse case scenario, they’ll hear the month twice. I haven’t found a way to hide content from screenreaders.
Was thinking about this, since I too am using media queries to restructure pages. Try this:
21 <span class="month">Sep<span>tember</span></span> 2011
For screen where you want it one atop the other without the full name:
.month {
display:block;
text-transform:uppercase;
}
.month span {
display:none;
}
For when you want them inline, just leave them alone and/or undo the above CSS.
To undo it if layering your screen+width over screen
.month,
.month span {
display:inline;
text-transform:none;
}
Pretty simple. Basically just simplifying down Ralph’s approach, and allowing for the case swap.
Thanks deathshadow60 but as I explained in a previous post, it isn’t a viable option in my case because the dates are generated dynamically, and also because of a language issue :
Thanks ralph.m, your solution is ideal however I’m not sure how easy it is to implement when the date is generated dynamically with a PHP function.
If it’s hard-coded then yes, that’s definitely how I’d do it for a website in English.
However in other languages such as French, the 3 letter abbreviation of the month does not always match the first 3 letters of the actual word.
July is Juillet in French, and the 3 letter abbreviation is JUL (as in English), not JUI.
So add some code to inject the desired markup – PHP for example:
$d=date('j F Y');
$monthStart=strpos($d,' ')+1;
substr_replace($d,'<span>',$monthStart+3,0);
substr_replace($d,'<span class="month">',$monthStart,0);
$monthEnd=strrpos($d,' ');
substr_replace($d,'</span></span>',$monthEnd,0);
strpos to detect first space, [url=http://www.php.net/manual/en/function.strrpos.php]strrpos to detect last space, [url=http://www.php.net/manual/en/function.substr-replace.php]substr_replace with length 0, inserts instead of replaces.
The order is important as the positions change when you add/remove markup, hence the +3 first, then the start, then find the last one.
interesting, but a bit technical for me to understand I’m afraid… 
It looks like you’re automatically displaying the first 3 letters of the month, which is not what I’m after since some of the months abbreviations are not the 3 first letters (at least in French)…