How Do I Make The New Google Calendar Event Text Wrap Around Using Css?

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 grea

Solution 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.

Solution 2:

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/'.