引導工具提示偏離大表格單元格中的大內容

我有一個表格，其中一些單元格中有鏈接。這些鏈接中的文字可能會很長。表格單元格的溢出隱藏，因此所有單元格的寬度都相同。當我在標籤上放置引導工具提示時，這會導致問題，因爲工具提示將右移到鏈接文本隱藏寬度的中心位置。引導工具提示偏離大表格單元格中的大內容

這裏是一個小提琴證明我的問題：http://jsfiddle.net/zjy1t9s7/

<table class="table table-condensed table-hover"> 
    <tbody> 
     <tr> 
      <td > 
       <a data-original-title="666" data-toggle="tooltip" data-placement="bottom" title=""> 
        This link has an incredibly long text which shifts the entire tooltip outside of the table cell, I personally think this looks like shit and want to fix it. Let's see if I can reproduce it here. 
       </a> 
      </td> 
                         <td > 
       <a data-original-title="555" data-toggle="tooltip" data-placement="bottom" title=""> 
        These are not as big 
       </a> 
      </td> 
      <td > 
       <a data-original-title="555" data-toggle="tooltip" data-placement="bottom" title=""> 
        These are not as big 
       </a> 
      </td> 
                          <td > 
       <a data-original-title="555" data-toggle="tooltip" data-placement="bottom" title=""> 
        These are not as big 
       </a> 
      </td> 
     </tr> 
    </tbody> 
</table> 

td { 
    border:1px solid #333; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    max-width: 75px; 
}

將鼠標懸停在第一個表格單元格和明白我的意思。

這是可以修復的嗎？

來源

2015-10-19 mpals

我嘗試的第一件事是將工具提示信息添加到td標籤。但是這引起了一點小問題，所以我在其周圍添加一個div封裝器，這爲我工作：

<td > 
    <div data-original-title="666" data-toggle="tooltip" data-placement="bottom" title=""> 
     <a> 
     This link has an incredibly long text which shifts the entire tooltip outside of the table cell, I personally think this looks like shit and want to fix it. Let's see if I can reproduce it here. 
     </a> 
    </div> 
</td>

新增CSS：

td > div { 
    max-width: 100%; 
    overflow:hidden; 
    text-overflow:ellipsis; 
}

小提琴：https://jsfiddle.net/zjy1t9s7/1/

編輯：簡單的解決方案沒有div-wrapper

將此內容添加到您的css：

td > a { 
    display:inline-block; 
    max-width:100%; 
    overflow:hidden; 
    text-overflow:ellipsis; 
}

文本標籤，如<一個>，<跨度>，<b>等需要，如果你想指定寬度或使用填充被定義爲塊型的DisplayStyle

小提琴：http://jsfiddle.net/zjy1t9s7/2/

來源

2015-10-19 14:42:38

我愛你m一個。 – mpals

但我必須問，我嘗試設置最大寬度：100％，並在我發佈之前在標籤上隱藏了溢出，但這並不奏效。爲什麼？爲什麼一個div在這些設置上的工作方式不同？ – mpals

如果要將文本字段定義爲特定寬度，則必須將其設置爲塊類型顯示樣式，例如_block_，_inline-block_等。我實際上找到了一種更簡單的方法來獲取您嘗試執行的操作。看看答案，看到新的小提琴 –

引導工具提示偏離大表格單元格中的大內容

回答

相關問題