In my (PHP) web app, I have a part of my site that keeps a history of recent searches. The most recent queries get shown in a side box. If the query text is too long, I truncate it and show ellipses. Eg: ‘My very long query is…’
Currently, I truncate after a certain number of characters. Since the font is not monotype, a query of all I’s is more narrow than a query of all W’s. I’d like them to all be about the same width prior to the ellipses. Is there a way to get the approximate width of the resulting string so that the ellipses for any given string will occur in about the same number of pixels from the beginning? Does CSS have a way? Does PHP? Would this be better handled by JavaScript?
Here’s another take on it and you don’t have to live without the ellipsis!
There is one flaw with this, if the text is short enough to be fully displayed, the ellipses will still be displayed as well.
[EDIT: 6/26/2009]
At the suggestion of Power-Coder I have revised this a little. There are really only two changes, the addition of the
doctype(see notes below) and the addition of thedisplay: inline-blockattribute on the.qrytxtDIV. Here is what it looks like now…Notes:
Viewed in IE 8.0, Opera 9, FF 3
A
doctypeis required for IE to get thedisplay: inline-blockto work correctly.If the
.qrytxtDIV’s overflow occurs on a long word, there is going to be a wide gap between the ellipsis and the last visible word. You can see this by viewing the example and resizing your browser width in small increments. (this probably existed in the original example as well, I just may have not noticed it then)So again, an imperfect CSS-only solution. Javascript may be the only thing that can get the effect perfect.
[EDIT: 6/27/2009]
Here is another alternative which uses browser specific extensions.
Note that in order for the above example to work, you must create the xml file referenced by the -moz-binding rule, ellipsis-xbl.xml. It’s should contain the following xml: