html - 如何让文本溢出与表 标签一起使用

Question

我有一个在标签中包含用户名的表。我需要该表能够响应并能够处理长用户名。随着表格的缩小，我需要将名字和姓氏换行，但随着它继续缩小，我想在名字开始被截断时显示一个省略号。我正在努力完成这项工作。

如何让用户列以响应方式收缩，以及如何让文本按照我上面描述的方式运行？

.leaderboard {
  max-width: 800px;
}

.media-left, .media-body {
  display: table-cell;
  vertical-align: middle;
}

.media-left {
  padding-right: 10px;
}

td a {
  padding: 5px;
  display: block;
  text-decoration: none;
  color: inherit;
}

.user-column {
  max-width: 225px;
}

.leaderboard .name {
  display: inline-block;
}

.truncate {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet"/>
<table id="user-leaderboard" class="leaderboard table table-condensed">
  <colgroup><col>
  <col>
  <col width="22%">
  <col width="22%">
  <col width="22%">
  </colgroup><thead>
    <tr>
      <th class="text-center">Rank</th>
      <th>User</th>
      <th class="text-center">dataset1 </th>
      <th class="text-center">dataset2 </th>
      <th class="text-center">dataset3 </th>
    </tr>
  </thead>
  <tbody class="user-rows">
      <tr class="clickable-row" id="">
    <td class="text-center"><a href="#">1</a></td>
    <td class="user-column">
      <a href="#">
        <div class="media">
          <div class="media-left media-middle">
            <img class="img-rounded" src="http://twemoji.maxcdn.com/36x36/1f47e.png" width="36px">
          </div>
          <div class="media-body media-middle">
            <div class="name truncate">First</div>
            <div class="name truncate">Last</div>
          </div>
        </div>
      </a>
    </td>
    <td class="text-center sort-column"><a href="#">6</a></td>
    <td class="text-center "><a href="#">9</a></td>
    <td class="text-center "><a href="#">3</a></td>
  </tr>
  <tr class="clickable-row" id="leaderboard-user-row">
    <td class="text-center"><a href="#">2</a></td>
    <td class="user-column">
      <a href="#">
        <div class="media">
          <div class="media-left media-middle">
            <img class="img-rounded" src="http://twemoji.maxcdn.com/36x36/1f47e.png" width="36px">
          </div>
          <div class="media-body media-middle">
            <div class="name truncate">Reallyreallyrealylreallylongfirstname</div>
            <div class="name truncate">Reallyreallyreallyreallyreallylonglastname</div>
          </div>
        </div>
      </a>
    </td>
    <td class="text-center sort-column"><a href="#">4</a></td>
    <td class="text-center "><a href="#">3</a></td>
    <td class="text-center "><a href="#">3</a></td>
  </tr>
  <tr class="clickable-row" id="">
    <td class="text-center"><a href="#">3</a></td>
    <td class="user-column">
      <a href="#">
        <div class="media">
          <div class="media-left media-middle">
            <img class="img-rounded" src="http://twemoji.maxcdn.com/36x36/1f47e.png" width="36px">
          </div>
          <div class="media-body media-middle">
            <div class="name truncate">Firstname</div>
            <div class="name truncate">Lastnamelong</div>
          </div>
        </div>
      </a>
    </td>
    <td class="text-center sort-column"><a href="#">3</a></td>
    <td class="text-center "><a href="#">2</a></td>
    <td class="text-center "><a href="#">3</a></td>
  </tr>
  
  </tbody>
</table>

jsfiddle

Answer 1

您需要为 .truncated 设置一个 max-width。由于它们没有被缩短，它们会自动拉伸(stretch)到全宽。 https://jsfiddle.net/yak613/jsdwcox9/

.truncate {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 150px; 
}