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

/* 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>