如何让新的Google日历事件文字环绕使用CSS？ [英] How do I make the new Google calendar event text wrap around using CSS?

问题描述

我无法阅读我的Google日历活动的完整标题，因为它们被截断以适应日历框。因此，打印输出的效果并不像它那样有用。过去有一个改变CSS的固定插件，但Google已经重新设计了日历，现在标题相互重叠，无法正常阅读。

现在我需要添加什么CSS以使事件标题很好地包装？这是Greasemonkey插件的现有代码：

  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）; 
  

下面是Greasemonkey插件本身： http://userscripts.org/scripts/show/97755 - 如果您将Google日历恢复为经典视图，但可能会失败为新视图工作。

更新：

我已经保存了Google日历的示例，显示两个测试事件：

• http： //pastebin.com/wx5Qm8yx - 日历的HTML代码


• http://pastebin.com/UZnLp2Pj - 将现有样式表重命名为style.css

解决方案

  .rb-n {$ 
根据提供的页面样本，您可以使用以下样式： b $ b空格：正常！重要; 
} 
 .te {
 overflow：inherit！important; 
空格：正常！重要; 
 
 code $ 
 
 
 $ p $注意：   
 
 
 
 
 
如果您只是更改样式，那么它远远优于使用
 时尚。  
 
 
时尚更快;页面更改更容易/更快速维护;更改适用，无任何闪烁或延迟;并且经常有人已经在 Userstyles.org 上发布了大量您想要的内容。
 
 
 
 
同样，您不需要使用所有的JS在Greasemonkey中添加样式。使用 GM_addStyle 功能：
  GM_addStyle（\ 
 .rb-n {\ 
 white-space：normal！important; \ 
} \ 
 .te { \ 
 overflow：inherit！important; \ 
 white-space：normal！important; \ 
} \ 
）; 
  
 
 
 
 
 Google会在没有任何警告的情况下快速更改其页面。  Firebug 可以帮助您确定新的更改和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 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

解决方案
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.


                        
这篇关于如何让新的Google日历事件文字环绕使用CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！