View Full Version : How to abbreviate a string as the width of a column grid?

19 Apr 2011, 8:57 AM
Hi all.

In my project, I have a grid and its columns has no fixed size and I can resize the columns. In each column I have a div that contains a string result.

I would like to abbreviate the string as the column width. How can I do this?


20 Apr 2011, 5:26 PM
To google and type "way to abbreviate atring",that i ok.
runescape gold (https://www.gametradeeasy.com/runescape/gold/runescape_en.html)

21 Apr 2011, 4:45 AM
If by "abbreviate", you mean adding a "..." when the String is longer than the cell in the grid, it is automatic: GXT uses the text-overflow: ellipsis CSS attribute.

But still, it doesn't work in all browsers: Firefox doesn't support it (at least in 3.6 version).

But you can emulate it. Here is what I did to make it work:
created an ellipsis.xml file with this content:

<?xml version="1.0" encoding="UTF-8"?>
<binding id="ellipsis">
<xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>

and added this in my custom CSS:

/* workaround for ellipsis in FF */
.x-combo-list-item {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-moz-binding: url('ellipsis.xml#ellipsis');

Hope this helps.

Edit: a reference about ellipsis hacks to make it work in all so-called 'modern' browsers:

3 May 2011, 3:36 AM
Hi cyChop. Thanks for your help, it works!

To work also in Chrome, I used:
-moz-binding: url("chrome://conkeror/content/ellipsis.xml#ellipsis");