Why Doesn't CSS Ellipsis Work in Table Cell

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>

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/

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

Can't make ellipsis work with display: table-cell

Use table-layout: fixed for the table - see demo below:

.table {  display: table;  width: 100%;  border: 1px solid #f00;  margin-bottom: 20px;  table-layout: fixed; /* ADDED THIS */}.table-row {  display: table-row}.table-cell {  display: table-cell;}.table-cell:first-child {  width: 30%;}.table-cell ul {  padding: 0;  margin: 0}.table-cell ul li {  list-style: none;}.item {  border: 1px solid #000;}.item-desc {  white-space: nowrap;  text-overflow: ellipsis;  overflow: hidden;}

<div class="table">  <div class="table-row">    <div class="table-cell">      <ul>        <li>          <div class="item">            <div class="item-name">Item 1</div>            <div class="item-desc">              Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1            </div>          </div>        </li>      </ul>    </div>    <div class="table-cell">Nothing here</div>  </div></div>

Ellipsis doesn't work in table cell

Add position: relative to .el-cell and position: absolute to the span with attributes top: 0 and left: 0

.wrapper {  width:200px;  background: wheat;}
.el-cell {  width:99%;  position: relative;}
.el span{  position: absolute;  top: 0;  left: 0;  width: 100%;  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}

<div class="wrapper">  <table class="table">    <tr>      <td class="el-cell">        <div class="el">          <span>first cell should ellipsis aaaaaaa bbbb ccccccc</span>        </div>      </td>      <td>        <span class="no-wrap">2nd cell</span>      </td>    </tr>  </table></div>

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>

How can I make ellipsis work in an HTML table?

Why doesn't it use that free space (marked orange below in the screenshot)?

Because your <div> inside the <td class="col-B"> also has the class col-B and every element wit class col-B inside your table will have a width of 75% which you have specified in your css like so:

table .col-B {
  width: 75%;
}

You can change that in multiple ways. One solution is to overwrite the width of the div like so:

table th,
table td {
  border: 1px solid red;
}

table .col-A {
  width: 25%;
}

table .col-B {
  width: 75%;
}

table .col-B div {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 100%; /* only added this line */
}

<table>
  <thead>
    <th class="col-A">Column A</th>
    <th class="col-B">Column B</th>
  </thead>
  <tbody>
    <tr>
      <td class="col-A">Value A1</td>
      <td class="col-B">Value B1</td>
    </tr>
    <tr>
      <td class="col-A">Value A2</td>
      <td class="col-B">
        <div class="col-B">Value B2 that is going to be ellipsized, because it's way too long!</div>
      </td>
    </tr>
  </tbody>
</table>

text-overflow ellipsis on table cell does not work in IE8 and IE9

Try this, hope it helps (tested in IE8 natively).

http://jsfiddle.net/s7va8mLc/7/

http://jsfiddle.net/s7va8mLc/7/embedded/result/

HTML

<table>
 <tr>
    <th>Test</th>
    <td>
        <span>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </span>
    </td>
 </tr>
</table>

CSS

table {
    width: 500px;
    border: 1px dotted blue;
}
th {
    width: 250px;
}
td, span {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
span {
    display: block;
    border: 1px dotted red;
}

Can't enable ellipse character on long text not fitting the cell in a table

Solution 1

Table cells don't handle overflow well. You will need to set the max-width CSS property on each td for the overflow to work. Try to make use of max-width instead of width

The max-width CSS property sets the maximum width of an element.
It prevents the used value of the width property from becoming larger
than the value specified by max-width.

body {  font: 13px Verdana;}
td {  background-color: pink;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;  max-width: 50px;}

<table class="table">  <thead>    <th>Name</th>    <th>Alias</th>    <th>Location</th>    <th>Updated</th>    <th>Actions</th>  </thead>  <tbody>    <tr>      <td>Ali Baba & Co.</td>      <td>Boys 'n da hood</td>      <td>Somewhere over the rainbow</td>      <td>February 30th</td>      <td>Do stuff!</td>    </tr>  </tbody></table>