Truncate a string at the beginning

Question

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.

php [substr()](http://php.net/manual/en/function.substr.php) comes to mind — , Apr 09 '13 at 20:56
http://stackoverflow.com/questions/9793473/text-overflow-ellipsis-on-left-side — Andreas, Apr 09 '13 at 20:59
Thanks. I wish https://developer.mozilla.org/en-US/docs/CSS/text-overflow (direction: rtl) was more widely adopted — Rohit Chopra, Apr 09 '13 at 21:06

score 0 · Accepted Answer · answered Apr 09 '13 at 20:55

0

$short = '...'.substr($url, -20);

In tooltip just show $url

answered Apr 09 '13 at 20:55

rinchik

2,642
8
29
46

Right. I know how do it in PHP, the good thing about using CSS is that the truncation is dynamic. `O` for examples takes more pixel space than `i`. CSS text-overflow auto calculates and puts the ellipsis according to the div width. – Rohit Chopra Apr 09 '13 at 20:58
2

the bad thing about css or anything client side is its not reliable, some user will have a browser that does not support it, that cant happen if you do it server side – Apr 09 '13 at 20:59
It's not much different in javascript... `short = '...' + (url.substr(-20));` – Mottie Apr 09 '13 at 21:01
@RohitChopra In this instance, a monospaced font would solve your problem (and would be a good fit for this type of data). – cimmanon Apr 09 '13 at 21:08

score 0 · Answer 2 · answered Apr 09 '13 at 21:11

0

You can accomplish that with pure CSS and direction property set to rtl (right to left) on the container.

answered Apr 09 '13 at 21:11

Arbel

30,599
2
28
29

Truncate a string at the beginning

2 Answers2