This is weird so I'll try to keep it simple.

I have an html table with td elements that have overflow: hidden; and text-overflow: ellipsis; set. There's some other css to make the text actually ellipse but that's not the point other than to note it's all html and css, no javascript to make this happen.

So if the text in a cell is long enough the text will be truncated to a particular width.

e.g. 'a really long name' -> 'a really lo...'

Now the awkward part is that when this occurs and you use your browser finder (ctrl+f/cmd+f) to search for text that has been truncated, the text in the table cell shift so the text that you're looking for is in a visible position but it's still not actually visible because it is being truncated.

Given the above text as an example if you searched (ctrl+f/cmd+f) for the text 'name' the text would shift to the left so that it would no longer be positioned correctly and there would be a yellow highlight over the position where the text 'name' is. Obviously the name value is actually present in the DOM but it's not visible to the user because it's being truncated.

Here's an image of this behavior on my system.

I noted this behavior in Chrome - 43.0.2357 but not in Firefox - 38.0.5.

Any ideas on how to prevent this cell data from shifting to the left?