Ярлык обрезается внизу, когда он завернут в встроенный блок

Question

Мне нужен текст, который нужно обрезать с помощью многоточия, когда он не помещается в ячейку таблицы. У меня есть решение для этого, но похоже, что у него есть проблема с компонентом Label 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

проблема связана с высотой табличных ячеек. посмотрите http://jsfiddle.net/DTcHh/4273/

увеличение line-height сделаю.