CSS破字和動態HTML

我有一個CSSCSS破字和動態HTML

.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; 
}

然後，我動態創建引導的工具提示，並把這個表裏面

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標籤，並因此被顯示爲原始文本，如

enter image description here

是否有可能以某種方式解決它？我沒有任何線索了。

來源

2013-11-28 Tony

嗨我編輯了你的代碼：請看看它是否有幫助。

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

來源

2013-11-28 13:31:02 Marinus

不要使用word-wrap: break-word。根據定義，它會任意斷開字符串（並且很少）。請在適當的地方插入<wbr>標籤或其他indicate line breaking opportunity。

來源

2013-11-28 14:45:37

CSS破字和動態HTML

回答

相關問題