I am doing a text-overflow: ellipsis in a div to truncate some extremely long text values. Basically to avoid the overflow from increasing the width of the div since there is no white space in URL. What I need to do is display the following:
http://www.somewebsite.org/over-the-counter/drugs/medone.html
http://www.somewebsite.org/over-the-counter/drugs/medtwo.html
http://www.somewebsite.org/over-the-counter/drugs/medthree.html
as:
...he-counter/drugs/medone.html
...he-counter/drugs/medtwo.html
...-counter/drugs/medthree.html
Is this doable at-all in HTML/CSS? or is jQuery/PHP my only resolve?
BTW, upon mouseover the full string is displayed as a tooltip.
$short = '...'.substr($url, -20);
In tooltip just show $url
You can accomplish that with pure CSS and direction property set to rtl (right to left) on the container.