具有大量内容的表格单元格中的引导工具提示偏离中心

Question

我有一个表格，其中一些单元格中有链接。这些链接中的文本可能很长。表格单元格的溢出被隐藏，因此所有单元格的宽度相同。当我在标签上放置引导工具提示时，这会导致问题，因为工具提示向右移动以居中链接文本的隐藏宽度。

这是一个演示我的问题的小提琴：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;
}

将鼠标悬停在第一个表格单元格上，看看我的意思。

这可以修复吗？

Answer 1

我尝试的第一件事是将工具提示信息添加到 td-tag。但这引起了一个小问题，所以我在它周围添加了一个 div-wrapper，这对我有用：

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

、、 等文本标签需要定义为块型显示样式，如果你想指定一个 width 或使用 padding

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