I want to use CSS text-overflow
in a table cell, such that if the text is too long to fit on one line, it will clip with an ellipsis instead of wrapping to mult
Without using max-width
, or percentage column widths, or table-layout: fixed
etc.
https://jsfiddle.net/tturadqq/
How it works:
Step 1: Just let the table auto-layout do its thing.
When there's one or more columns with a lot of text, it will shrink the other columns as much as possible, then wrap the text of the long columns:
Step 2: Wrap cell contents in a div, then set that div to max-height: 1.1em
(the extra 0.1em is for characters which render a bit below the text base, like the tail of 'g' and 'y')
Step 3: Set title
on the divs
This is good for accessibility, and is necessary for the little trick we'll use in a moment.
Step 4: Add a CSS ::after
on the div
This is the tricky bit. We set a CSS ::after
, with content: attr(title)
, then position that on top of the div and set text-overflow: ellipsis
. I've coloured it red here to make it clear.
(Note how the long column now has a tailing ellipsis)
Step 5: Set the colour of the div text to transparent
And we're done!
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]-->
It is worked for me
table {
width: 100%;
table-layout: fixed;
}
td {
text-overflow: ellipsis;
white-space: nowrap;
}
Specifying a max-width
or fixed width doesn't work for all situations, and the table should be fluid and auto-space its cells. That's what tables are for.
Use this: http://jsfiddle.net/maruxa1j/
HTML:
<td class="ellipsis">
<span>This Text Overflows and is too large for its cell.</span>
</td>
CSS:
.ellipsis {
position: relative;
}
.ellipsis:before {
content: ' ';
visibility: hidden;
}
.ellipsis span {
position: absolute;
left: 0;
right: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Works on IE9 and other browsers.
I solved this using an absolutely positioned div inside the cell (relative).
td {
position: relative;
}
td > div {
position: absolute;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
That's it. Then you can either add a top: value to the div or vertically center it:
td > div {
top: 0;
bottom: 0;
margin: auto 0;
height: 1.5em; // = line height
}
To get some space on the right side, you can reduce the max-width a little.
Why does this happen?
It seems this section on w3.org suggests that text-overflow applies only to block elements:
11.1. Overflow Ellipsis: the ‘text-overflow’ property
text-overflow clip | ellipsis | <string>
Initial: clip
APPLIES TO: BLOCK CONTAINERS <<<<
Inherited: no
Percentages: N/A
Media: visual
Computed value: as specified
The MDN says the same.
This jsfiddle has your code (with a few debug modifications), which works fine if it's applied to a div
instead of a td
. It also has the only workaround I could quickly think of, by wrapping the contents of the td
in a containing div
block. However, that looks like "ugly" markup to me, so I'm hoping someone else has a better solution. The code to test this looks like this:
td, div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border: 1px solid red;
width: 80px;
}
Works, but no tables anymore:
<div>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</div>
Works, but non-semantic markup required:
<table><tr><td><div>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</div></td></tr></table>