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');                    

}`

Answer 2

请勿使用word-wrap: break-word。根据定义，它可以任意打破字符串（并且很少适用）。相反，请在适当的位置插入<wbr>标记或其他indicate line breaking opportunity。