I have a web app where I'm currently keeping lists of single-lined text inside a fixed width and setting the overflow to ellipses. So say one line looks like the following:
Bananas, apples, pears, oran...
I have a built-in search filter that will query the list and update the view to list only the text entries that contain the matching search query. It will also highlight the portion of each entry that has this matching query.
However, since the text has hidden overflow, sometimes the highlighted portion is hidden behind the ellipses. I want to implement something that will shift the text to the left and stop until the matching query becomes visible and can become highlighted.
So if I search "oranges", I would like the text to shift to look like this:
...anas, apples, pears, oranges...
And if I search "orang", it would shift less like such:
...ananas, apples, pears, orang...
I would like to update the view without changing the data of the entry. I'm looking for a way to update this involving CSS and Javascript/Jquery. Any suggestions would be great!
EDIT: I think I can work with something similar to {text-overflow: ellipsis ellipsis;} and dynamically manipulate the text-indent based on conditions, but is there a way to get this to work in Chrome, seeing as the double ellipsis styling doesn't seem to work there?
