Custom text-overflow CSS?

Question

I am aware this is possible via Javascript, as I have done it myself. However, as the platform I am building up gets bigger and bigger, I want to take as much JS heavy-load as possible. Furthermore, at this point in time, I think using the CSS text-overflow property is much more do-able as FireFox now supports it as well.

Anyhow, reading the text-overflow reference page on MDN, I got curious about that third parameter defined as "string". I do not know whether this refers to "the text-overflow property accepts string values", or if it is a parameter on its own (just like clip and ellipsis).

Essentially, I would just like to know if this string parameter would allow me to generate a custom text-overflow output, such as " ..". I have tried things like:

• text-overflow: string(" ..");
• text-overflow: " ..";
• text-overflow: ellipsis-" ..";

Answer 1

Based on the Compatibility Table at the bottom of the MDN documentation, it seems only Firefox 9+ supports a string value for text-overflow.

So, you're mostly out of luck on that one.

Answer 2

Mozilla has gone ahead and proposed this syntax, and it's made an appearance in the early 2012 LC draft of the UI level 3 spec:

text-overflow: ' ..';

Or if you meant to append .. to the existing ellipsis:

text-overflow: '... ..';

However, there are no other known implementations yet besides Mozilla's own, and as such this syntax is at risk of being dropped from a later revision of the spec.