CSS text-overflow in a table cell?
To clip text with an ellipsis when it overflows a table cell, you will need to set the max-width
CSS property on each td
class for the overflow to work. No extra layout div
elements are required:
td
{
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
For responsive layouts; use the max-width
CSS property to specify the effective minimum width of the column, or just use max-width: 0;
for unlimited flexibility. Also, the containing table will need a specific width, typically width: 100%;
, and the columns will typically have their width set as percentage of the total width
table {width: 100%;}
td
{
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
td.column_a {width: 30%;}
td.column_b {width: 70%;}
Historical: For IE 9 (or less) you need to have this in your HTML, to fix an IE-specific rendering issue
<!--[if IE]>
<style>
table {table-layout: fixed; width: 100px;}
</style>
<![endif]-->
text-overflow: ellipsis is not working in table
It happens because of the display property in table. You need to give a display: block
to make ellipsis work, but it kind of removes how tables should work.
The better thing would be to wrap your td
contents inside a div
and change your CSS.
Option 2 would be using max-width to your
td`.
<td width="50px">
<div>Hello World</div>
</td>
CSS to:
td>div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 50px
}
OR Just add max-width
.container {
display: flex;
flex-direction: row;
}
p,
td>div,td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 50px;
}
<div class="container" style="width:100px; background-color: red">
<p width="50px">
Hello world
</p>
<p width="50px">
Hello world
</p>
</div>
<table style="background-color: green">
<tr width="100px">
<td width="50px">
<div>
Hello World</div>
</td>
<td width="50px">
<div>
Hello World</div>
</td>
<td width="50px">
Hello World
</td>
</tr>
</table>
Add text-overflow: ellipsis; to table cell
You will need table-layout: fixed
along with width set for the table. Otherwise ellipsis can only work with fixed td
width. And change the value of white-space: normal
to nowrap
.
Looks like, your table structure also needs to be fixed, missing <tr>
in <thead>
, and better to add <tbody>
below <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>
text-overflow: ellipsis; in table cell
after reconsidering my comment, I would still advise to style your table with table-layout:fixed; and reset default display on a as you did, but build it with a little more table elements.
https://www.w3.org/wiki/HTML/Elements/colgroup
https://www.w3.org/WAI/UA/TS/html401/cp1001/1001-COL-COLGROUP.html
table {
width:100%;
table-layout:fixed;
line-height:50px;
}
thead {background:green;}
td {width:100%;}
col {background:gray;}
col:first-child, col:last-child {
width:4em;
background:red;
}
col:last-child {
background:cyan;
}
a { display:block;
background-color: white;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width:100%;}
<table id="raceTable">
<colgroup>
<col/>
<col/>
<col/>
</col>
<thead>
<tr>
<th colspan="3">3 Players</th>
</tr>
</thead>
<tbody>
<tr>
<td>1st</td>
<td><a>Link to profile of player A</a></td>
<td>00:22:12</td>
</tr>
<tr>
<td>2st</td>
<td><a>Link to profile of player B</a></td>
<td>00:23:12</td>
</tr>
<tr>
<td>3st</td>
<td><a>Link to profile of player C Link to profile of player C Link to profile of player C</a></td>
<td>00:24:15</td>
</tr>
</tbody>
</table>
Why doesn't CSS ellipsis work in table cell?
Apparently, adding:
td {
display: block; /* or inline-block */
}
solves the problem as well.
Another possible solution is to set table-layout: fixed;
for the table, and also set it's width
. For example: http://jsfiddle.net/fd3Zx/5/
Related Topics
Vertical Align Text After Font Icon
Cutting Image Diagonally with CSS
How Could I Play a Shoutcast/Icecast Stream Using HTML5
Which Unit I Should Use in CSS When Designing a Web Page
Telephone Numbers and Screen Readers
How to Change Font Size in a Textbox in HTML
Pseudo Elements Breaking Justify-Content: Space-Between in Flexbox Layout
How to Control The Width of Select Tag
Why Is 'Font-Family' Not Inherited in '<Button>' Tags Automatically
CSS Drop Down Menu Hover Effect
HTML to Excel: How Can Tell Excel to Treat Columns as Numbers
Iframe 100% Height Inside Body with Padding
Align Div's to Bottom or Baseline
Assign Variables to Child Template in {% Include %} Tag Django
Why Does Angularjs Ng-View Not Work Locally
Android: How to Add HTML Links Inside a Listview