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

Question

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

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

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

fiddle 是 here。我错过了什么？！

Answer 1

解决方案 1

Table 单元格不能很好地处理溢出。您需要在每个 td 上设置 max-width 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>

解决方案 2

或者只需将 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>

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

Can't enable ellipse character on long text not fitting the cell in a table

html

css

text

ellipsis