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

时间:2018-01-10 15:15:42

标签: html css text ellipsis

当表格单元格的宽度太窄而无法显示时,我希望在文本被切断时出现省略号。根据{{​​3}},它应该看起来如下(在那里没有什么意外)。

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

但是,我无法使其发挥作用。首先我认为这是因为我应用Bootstrap并且可能有一些造型欺骗我的方法然后我试图在一个孤立的小提琴重现错误 - tada! - 我搞定了。 (即我得到了失败的椭圆,因此得到了可重复的错误成功发生。)

小提琴是CSS Tricks。我错过了什么?!

1 个答案:

答案 0 :(得分:0)

解决方案1 ​​

表格细胞不能很好地处理溢出。您需要在每个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>
&#13;
&#13;
&#13;

解决方案2

或者只需将 td 内容放在 <span> 中,然后应用css

&#13;
&#13;
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;
}
&#13;
<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>
&#13;
&#13;
&#13;