将标签包装到内联块中时，会在底部剪裁标签

Question

当文本不适合表格单元格时，我需要用省略号剪裁它。我有它的解决方案，但它似乎有Bootstrap的Label组件的问题。请参阅以下代码：

<table class="table commits-table" style="width: 300px; border: 1px solid #777">
    <tr>
        <td class="message">
            <span>
                <!-- This label is clipping in the bottom -->
                <a class="label label-info">Sample</a>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
        </td>
        <td class="date">2015-02-02</td>
        <td class="hash">7482ab63</td>
    </tr>
</table>

和CSS：

.commits-table .date, .commits-table .hash {
    white-space: nowrap;
    width: 1%;
}
.commits-table .message {
    max-width: 250px;
    vertical-align: baseline;
}
.commits-table .message > span {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block; /* This inline-block cause the issue */
    width: 100%;
    vertical-align: bottom;
}

JSFiddle

有人建议如何在这种情况下修复底部的标签夹吗？

提前感谢！

Answer 1

问题在于表格单元格的高度。看一看http://jsfiddle.net/DTcHh/4273/

增加line-height即可。