How do I make the new Google calendar event text wrap around using CSS?

Question

I can't read the full title of my Google Calendar events, because they're truncated to fit in the day box. And so a printout isn't as useful as it could be.

There used to be a greasemonkey plugin that changed the CSS to fix this, but Google have redesigned the calendar, and now the titles overlap each other and can't be read properly.

What CSS do I now need to add to the page to make the event titles wrap nicely? This is the existing code of the Greasemonkey plugin:

function buildStyle()
{
    var st = "div.rb-n, span, nobr { white-space: normal; }";
    var dochead = document.getElementsByTagName("head")[0];
    var stEl = document.createElement("style");
    stEl.setAttribute("type", "text/css");
    stEl.innerHTML = st;
    dochead.appendChild(stEl);
}

window.addEventListener("load", function(e) {
    buildStyle();
}, false);

Here is the Greasemonkey plugin itself: http://userscripts.org/scripts/show/97755 -- It can be seen working correctly if you revert Google calendar to 'classic view', but fails to work for the new view.

UPDATE:

I've saved off an example of a Google calendar, showing two test events:

• http://pastebin.com/wx5Qm8yx - the HTML code for the calendar
• http://pastebin.com/UZnLp2Pj - The existing stylesheet, rename this to style.css

Answer 1

Based on the page sample provided, you would use these styles:

.rb-n {
    white-space: normal !important;
}
.te {
    overflow: inherit !important;
    white-space: normal !important;
}

---

Note:

1. If you are just changing styles, then it is far superior to use Stylish.

   Stylish is faster; Page-changes are easier/faster to maintain; Changes apply without any flicker or delay; and often, someone has already posted much of what you want at Userstyles.org.

2. Likewise, you do not need to use all that JS to add styles in Greasemonkey. Use the GM_addStyle function:

   GM_addStyle ( "                                 \
       .rb-n {                                     \
           white-space:    normal !important;      \
       }                                           \
       .te {                                       \
           overflow:       inherit !important;     \
           white-space:    normal !important;      \
       }                                           \
   " );
   

3. Google changes their pages rapidly and without warning. Firebug can help determine new changes, and CSS workarounds, as they appear.