html - 无法在不适合表格单元格的长文本上启用椭圆字符

Question

当表格单元格的宽度太窄而无法显示时，每当文本被截断时，我希望出现一个省略号。根据CSS Tricks ，它应该如下所示(没什么奇怪的)。

td {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

但是，我无法让它工作。首先我认为这是因为我正在应用 Bootstrap 并且可能有一些样式欺骗我的方法但后来我试图在一个孤立的 fiddle 中重现错误并且 - tada! - 我让它工作了。 (即我让它失败省略，因此得到可重现的错误成功发生。)

fiddle 是here .我错过了什么？!

Answer 1

解决方案一

表格单元格不能很好地处理溢出。您需要设置 max-width 每个 td 上的 CSS 属性使溢出起作用。尝试利用 max-width 而不是 width

The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width.

body {
  font: 13px Verdana;
}

td {
  background-color: pink;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50px;
}

<table class="table">
  <thead>
    <th>Name</th>
    <th>Alias</th>
    <th>Location</th>
    <th>Updated</th>
    <th>Actions</th>
  </thead>
  <tbody>
    <tr>
      <td>Ali Baba &amp; Co.</td>
      <td>Boys 'n da hood</td>
      <td>Somewhere over the rainbow</td>
      <td>February 30th</td>
      <td>Do stuff!</td>
    </tr>
  </tbody>
</table>

方案二

或者只放置 td 里面的内容 <span> 然后应用 css

body {
  font: 13px Verdana;
}

span {
  background-color: pink;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  display: block;
}

.table {
  width: 100%;
  table-layout:fixed;
}

<table class="table">
  <thead>
    <th>Name</th>
    <th>Alias</th>
    <th>Location</th>
    <th>Updated</th>
    <th>Actions</th>
  </thead>
  <tbody>
    <tr>
      <td><span>Ali Baba &amp; Co.</span></td>
      <td><span>Boys 'n da hood</span></td>
      <td><span>Somewhere over the rainbow</span></td>
      <td><span>February 30th</span></td>
      <td><span>Do stuff!</span></td>
    </tr>
  </tbody>
</table>