javascript - Bootstrap 工具提示在内容较大的表格单元格中偏离中心

Question

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

这是一个演示我的问题的 fiddle :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 标签。但这引起了一个小问题，所以我在它周围添加了一个 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;
}

fiddle :https://jsfiddle.net/zjy1t9s7/1/

编辑:没有 div-wrapper 的更简单的解决方案

将此添加到您的 CSS 中:

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

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

fiddle :http://jsfiddle.net/zjy1t9s7/2/