thoughts

.ellipsis {
  text-overflow: ellipsis;
  -moz-binding: url('ellipsis.xml#ellipsis');
  

<?xml version="1.0"?>
<bindings 
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
  <binding id="ellipsis">
    <content>
      <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
    </content>
  </binding>
</bindings>

comment

Gappa (2008-07-11)

Good one.

One drawback so far - the cropped text cant be selected. Can that be fixed somehow?

Bevan Collins (2008-07-23)

Thanks for this... just what I needed

Evora (2008-07-30)

Thanks! A step in the right direction, at least (and at last).

Fernando (2008-08-20)

Finally something that works as expected... Thanks!!!!

William (2008-10-11)

This doesn't seem to work in Firefox 2.x. Is there any solution to that?

William (2008-10-11)

Solved it. I added <xul:window> around <xul:description> and it works on FF2 now. (And hopefully no drawback on FF3)

Steve (2008-11-06)

Hey guys -- I have tried this solution in a simple test page with no luck. I have verified that the XML file is being read by Mozilla (I am using Firefox 2) by adding some javascript to a <constructor> section before the <content> section. The javascript does run -- so Mozilla is definitely responding to the ellipsis style in my page. The overflowing text simply runs over my div -- and never cuts off at all, let alone with an ellipsis. Has anyone else had this problem? I must be missing something...I have cut and pasted the above code exactly. Thanks for any help.

Rikkert (2008-11-11)

be sure to have overflow: hidden on the div itself. Furthermore, white-space: nowrap is essential

Katharina (2008-11-17)

do you have an url with a working sample of this feature?

Gunnar (2008-11-24)

I can't get this working in Firefox 2. 'xul:window' doesn't help for me. Are there any plug-ins involved?

Could anyone come up with a test page that works in your Firefox 2? Thanks.

Bayernfan (2008-12-16)

Hi. In FF2 still does not work. :( Any update on this? Did someone manage to do it? Thanks

wule (2008-12-16)

i test at local,and when i want to select the text,it did not work

anybody know why?

Gunnar (2009-01-09)

Another drawback: The content of the element [@class="ellipsis"] must be either PCDATA <p class="ellipsis">foo bar baz</p> or one single child element <p class="ellipsis"><em>foo bar baz</em></p> Whitespace is OK: <p class="ellipsis"> <em>foo bar baz</em> </p>

It must not be mixed content: <p class="ellipsis">foo <em>bar</em> baz</p> results in "foo baz"; the content of the 'em' element will not be displayed.

A single child element <p class="ellipsis"><em>foo bar baz</em></p> works fine when the rule .ellipsis em {-moz-binding: url(ellipsis.xml#ellipsis)} has been added to the stylesheet.

Same for other possible child element types: .ellipsis a, .ellipsis em, .ellipsis strong {-moz-binding: url'ellipsis.xml#ellipsis)}

The universal selector .ellipsis * {-moz-binding: url(ellipsis.xml#ellipsis)} does not work here!

For the child element, the same PCDATA or single child element rule applies.

xing (2009-03-08)

真不错啊~~

Jonathan (2009-03-11)

I am working on displaying a long line to show in a div that has a fixed width and height. I copied the example in here and it works well for a single line. How can I apply the example to work for displaying the one long line in multiple lines? The end result should also show the ellipsis at the last line. For example, the long line is "This is a long line. This is a long line. This is a long line. This is a long line. This is a long line. This is a long line. This is a long line."

The result should look something like: This is a long line. This is a long line. This is a long line. This is a long line. This is a long line. Thi...

It only displays 5 lines out of 7 because the container div can only show 5 lines and a few more characters.

Thanks.

Jonathan (2009-03-11)

The 5 lines displayed in the container div should be wrapped by the div's width though here it displayed them in one line.

Thanks.

Rikkert (2009-03-30)

with regards to selecting text: I have been playing around with the -moz-user-select css property, but without success. This property does not seem to have any effect on description and label elements, which, in turn, seem to be the only elements on which the crop attribute has some effect.

Neil Craig (2009-04-09)

Something else to note about this solution, the line-height CSS property is also not honored.

Thanh (2009-06-26)

I had gotten this to work before, but for some reason, I am now seeing some vertical bars in the front of the text and at the end of the text. Is anyone else getting this?

Larry Gerndt (2009-07-31)

Neil, thank god someone mentioned this, i was wondering what exactly was happening. Line height is not being honored. That explains what I'm seeing.

Maxym (2010-01-05)

it works well, except for one case... After I try to change content of element (does not metter either changing value of child's TextNode or using innerHTML) I see no visible changes, old content remains (but when I look in DOM actually new String is written in my tag.... any way to fix that?

Simon (2010-07-08)

@Maxym see http://mattsnider.com/javascript/dynamically-updating-content-of-firefox-ellipsis-hack/

Sharon Minsuk (2010-07-24)

Awesome work-around, thanks! This made my life easier. I have taken it a step further and figured out how to get around the drawbacks listed by Gunnar (no mixed content) so that I can freely style my text. I've written it up in a blog post of my own: http://sharonminsuk.com/blog/2010/07/22/css3-text-truncation-and-ellipses-even-in-firefox-and-without-the-styling-constraints/

Peter Lindberg (2010-08-05)

Add to the list of side-effects that text-transform: uppercase; will have no effect.