Bootstrap 3 truncate text in column on condensed table adding padding - css

Question

I have used the answer provided below by:
https://stackoverflow.com/a/39417644/2079735
However this seems to add some padding to the bottom of the table row as shown here: https://www.bootply.com/8FKvHOv2S5
CSS
.table td.text {
max-width: 177px;
}
.table td.text span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
max-width: 100%;
}

Answer 1

display:inline-block on span causes white space to appear. Change it to display:block
/* CSS used here will be applied after bootstrap.css */
.table td.text {
max-width: 177px;
}
.table td.text span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
max-width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2> Example no truncating</h2>
<div class="row">
<div class="col-md-10">
<table class="table table-striped table-bordered table-condensed">
<tbody>
<tr>
<td>
<span>
<a href="https://example.com">
Use Bootply to design, prototype, or test the Bootstrap framework. Find examples, share code and rapidly build interfaces for Bootstrap.
</a>
</span>
</td>
<td class="text-right">
28/04/2017 04:10:02
</td>
</tr>
</tbody>
</table>
</div>
</div>
<h2> Example with truncating</h2>
<div class="row">
<div class="col-md-10">
<table class="table table-striped table-bordered table-condensed">
<tbody>
<tr>
<td class="text">
<span>
<a href="https://example.com">
Use Bootply to design, prototype, or test the Bootstrap framework. Find examples, share code and rapidly build interfaces for Bootstrap.
</a>
</span>
</td>
<td class="text-right">
28/04/2017 04:10:02
</td>
</tr>
</tbody>
</table>
</div>
</div>