引导3截断文本上凝结表添加填充

Question

我已经使用由下面提供的答案： https://stackoverflow.com/a/39417644/2079735

然而，这似乎有些填充添加到表行的底部如下所示：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会导致出现空白。将其更改为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>