Bootstrap 3 截断压缩表列中的文本添加填充答案

【问题标题】：Bootstrap 3 truncate text in column on condensed table adding paddingBootstrap 3 截断压缩表列中的文本添加填充
【发布时间】：2018-01-17 05:31:29
【问题描述】：

我使用了以下提供的答案： 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%;
}

【问题讨论】：

标签： css twitter-bootstrap

【解决方案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>

【讨论】：