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

＆lt; a＆gt; ，＆lt; span＆gt; ，＆lt; b＆gt; 等文字标签需要定义为块 - 如果要指定宽度或使用填充，请键入displaystyle

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

在具有大内容的表格单元格中偏离中心的bootstrap工具提示

1 个答案: