包装到内联块中时，标签被夹在底部

Question

当文本不适合 table 单元格时，我需要使用省略号对其进行剪裁。我有解决方案，但似乎 Bootstrap 的标签组件有问题。请看下面的代码：

<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

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

增加 line-height 即可。

包装到内联块中时，标签被夹在底部

Label is clipped in the bottom when wrapped into inline-block

html

css

twitter-bootstrap

twitter-bootstrap-3