Css Text-Overflow in a Table Cell

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

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>

Vertical Text-overflow on table cell

You'll have to allow text to wrap inside .text-overflow updated css

.text-overflow {
  display: block;
  height: 20px;
  overflow: auto;
}

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>

Overflow on a table cell

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. You can try like this.

table {
    width: 100%;
}
td {
    max-width: 0;
    overflow: visible;
    white-space: nowrap;
}
td.columnA {
    width: 30%;
}
td.columnB {
    width: 70%;
}

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>

Css Text-Overflow in a Table Cell