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

I don't use Google calendar and a quick check shows the text that I tried wrapping. Save one of the offending pages to your harddrive, sanitize any incriminating text without changing the HTML structure and post that to http://pastebin.com/ . Then we can help pick the right CSS selector(s). — Brock Adams, Nov 22 '11 at 10:41

Brock Adams · Accepted Answer · 2013-06-02T12:17:34.120

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:

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.

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;      \
    }                                           \
" );

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

Thanks, this is a good answer. Although the solution you gave doesn't work will in my real calendar because all the events overlap, you've given me plenty of leads so I can take this further. — Will Sheppard, Nov 23 '11 at 10:49
Well, glad it helped some. I couldn't duplicate the issue in calendar (which I don't use), but you could post another question, if needed -- with file-saves of the HTML/CSS showing the new overlap problem. — Brock Adams, Nov 23 '11 at 10:58

Jake88 · Answer 2 · 2015-07-19T22:28:20.503

I used a different tutorial and combined the CSS found there with the Stylish extension for chrome. I have copied the original CSS here for convenience and historical reference. A big thanks to Jodie Miners for her hard work.

.rb-ni, .rb-n {
border:none;
display: inline-table; 
white-space: pre-wrap;
    font-size: 11px;
    font-weight: bold;
}

.st-c-pos > div[style] {
border:none !important;}

.st-dtitle-nonmonth {
color:lightgray;
font-size: 10px !important;
}

.st-dtitle{
font-size:14px;
font-weight:bold;
}

.date-top{
font-weight:bold;
font-size:20px;
}

.st-dtitle-today {
border-color: #DDD !important;
background-color: #FFF !important;
}

.st-bg-today, .st-bg-td-first, .st-bg-td-last {
background-color: #FFF !important;
border-color: #DDD !important;
}

@media print  { .noprint  { display: none; } }
@media print { .noprint { display: inline !important; }
#funbox {display:none !important;}
 }


#topLeftNavigation{
left: -10px !important;
}
.applogo{
display:none;
}
#gb {display:none}
#topRightNavigation {display:none}

Be sure to apply to URLs starting with 'https://www.google.com/calendar/'.

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

2 Answers2

Linked