テキストオーバーフローを追加：省略記号。テーブルのセルに

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>にあり、<tbody>が<thead>以下になるようにテーブル構造を修正する必要があります。 （：; - あなたの問題であり、20％.articleテーブルTD>幅）％：

.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

省略記号は動作しません。

私はその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;