| Issue 1350: | Truncate the title text | |
| 1 person starred this issue and may be notified of changes. | Back to list |
When the title of an event is very long. The text goes out of the boundaries of the event. I want the text to best fit the event area and truncate the rest of the text. May be add '...' at the end to show that the text was truncated.
Jun 26, 2012
#1
zhaoyuan...@gmail.com
Jun 27, 2012
I am using the following function. It obviously not a very good solution. But it works for me for now:
function truncateText(){
$(".fc-event-inner.fc-event-skin").each(function(){
//var contentContainer1 = this.find('div.fc-event-content');
var curEventHead = $(this).children('div.fc-event-head');
var curEventContent = $(this).children('div.fc-event-content');
var curEventBg = $(this).children('div.fc-event-bg');
var content = $(curEventContent).text();
if($(curEventContent).text() != "")
{
while( ($(curEventBg).height() - $(curEventHead).height()) < $(curEventContent)[0].scrollHeight ){
content = content.replace(/\s+\S*$/, "");
curEventContent.text(content + " ...");
}
}
else{
//var content = $(this).children('span.fc-event-title').text();
// if(content.length > 12){
// content = content.substring(0,12) + '...';
// }
// $(this).children('span.fc-event-title').text(content);
}
});
}
Call this method from "eventAfterRender" callback.
Aug 15, 2013
you could write CSS for the '.fc-event-inner' div, and use the new overflow ellipsis property. beyond this, i can't help
Status:
Invalid
|
|
| ► Sign in to add a comment |