Font-awesome: BUG: text-overflow: ellipsis removes icons in table

[timobehrens]

I have a simple table with font-awesome icons in their cells. I made the table columns resizable by using plain javascript. The cells content is hidden if overflown and an ellipsis ("...") is shown:

td, th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

The Problem:

When resizing the columns so that the content is hidden and then making it bigger again, all icons but the first from that column are gone.

Please check the isolated test case in this fiddle: http://jsfiddle.net/dew52L8u/7/

Any idea what's up here?

font-awesome version: 4.7.0
Browser: Chrome 61

[tagliala]

Hi,

thanks for reporting this.

It only affects chrome on my mac (10.13.1) and it does not strictly depend on Font Awesome: http://jsfiddle.net/dew52L8u/11/ (take a look at the red square)

Apparently, there is an issue with inline-block elements inside a text-ellipsis

Workaround: use inline elements -> http://jsfiddle.net/dew52L8u/10/

td .fa, th .fa {
  display: inline; /* Workaround for Chrome */
}

PS: please also this issue to the chromium issue tracker