添加文本溢出：省略號;到表格單元格

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。

的樣子，你的表結構也需要被固定，在<thead>失蹤<tr>，更好地低於<thead>添加<tbody>。 ％：

.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>

Answer 2

省略號不工作（.article表TD>寬度：20％; - 是你的問題）。

時，我想保持以某種方式「％」到DIV我的絕招，TD用省略號是添加2種不同尺寸：

max-width:300px; /*Inspect element in broswer and see how many pixels is 20%*/ 
width: 20%; 

在這種情況下省略號的工作和我的DIV，TD有我想要的尺寸。

而且嘗試一下本作.article表TD類：

text-overflow: ellipsis; 
overflow: hidden; 
white-space: nowrap;