html - 添加文本溢出 : ellipsis; to table cell

Question

我在表格中包含文本时遇到问题。我想给它一个 text-overflow: ellipsis。但我似乎无法让它工作。

HTML:

<table class="article-table">
  <thead class="article-table__headers">
    <th>Title</th>
    <th>Source</th>
    <th>Abstract</th>
    <th>Folder</th>
  </thead>
  <% @articles.each do |article| %>
    <tr class="article-table__rows">
      <td><%= article.title %></td>
      <td><%= article.source %></td>
      <td><%= article.abstract %></td>
      <td><%= article.folder %></td>
      <td><%= link_to "Download File", download_article_path(article) %></td>
    </tr>
  <% end %>
</table>

CSS:

.article-table td {
    width: 20%;
    border-bottom: 1px solid #ddd;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: normal;
}

虽然这不起作用。如果文本太长，它仍然会增加 td 的大小

Answer 1

您需要 table-layout: fixed以及为表格设置的宽度。否则省略号只能与固定的 td 一起使用宽度。并更改 white-space: normal 的值至 nowrap .

看来，你的表结构也需要修复，缺少<tr>在<thead> , 最好加上 <tbody>下面<thead> .

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

.article-table td {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<table class="article-table">
  <thead>
    <tr>
      <th>Title</th>
      <th>Source</th>
      <th>Abstract</th>
      <th>Folder</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The quick brown fox jumps over the lazy dog</td>
      <td>The quick brown fox jumps over the lazy dog</td>
      <td>The quick brown fox jumps over the lazy dog</td>
      <td>The quick brown fox jumps over the lazy dog</td>
    </tr>
  </tbody>
</table>