html - 包装到内联 block 中时，标签被夹在底部

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 即可。