jquery - CSS 中断词和动态 HTML

Question

我有那个 CSS

.tooltip-table 
{
    table-layout: fixed !important; 
    width: 250px;
}
.tooltip-table td.leftCol 
{
    overflow: hidden !important;
    padding-right: 10px;
    text-align: right;
    vertical-align: top;
    width: 100px !important;
}
.tooltip-table td.rightCol
{    
    width: 150px !important;
    word-wrap: break-word;
}

然后，我正在创建动态 Bootstrap 的工具提示并将该表放入其中

eventMouseover: function(event, jsEvent, view) {
     var myDiv = $('<div></div>').html('<tr><td class="leftCol">Description</td><td class="rightCol descTD"></td></tr>');

     $('.fc-event-inner', this).attr('data-placement','right')
                               .attr('data-original-title', '<table class="tooltip-table">'+$(myDiv).html()+'</table>')
                               .tooltip({ html: true});

     $('.descTD').html(event.description);

     $('.fc-event-inner', this).tooltip('show');                    
}

问题是，如果多行 HTML event.description 属性很长，CSS 可能会破坏 HTML 标签，因此它会显示为原始文本，例如

是否有可能以某种方式修复它？我已经没有任何线索了。

Answer 1

您好，我已经编辑了您的代码:请查看是否有帮助。

eventMouseover: function(event, jsEvent, view) {
 var myDiv = $('<div><tr><td class="leftCol">Description</td><td class="rightCol descTD"></td></tr></div>');

 $('.fc-event-inner', this).attr('data-placement','right')
                           .attr('data-original-title', '<table class="tooltip-table">'+$(myDiv)+'</table>')
                           .tooltip({ html: true});

 $('.descTD').html(event.description);

 $('.fc-event-inner', this).tooltip('show');                    

}`