Cross-browser text-overflow \ (^ _ ^) /

In the case when the text does not fit into the width of the block, there are several options for its visualization:

1. Allow him to climb outside the block. In most cases, it looks very kosyachno.
2. Crop the text along the block boundary. The same looks nekuzyavo.
3. Trim and draw scrolling. This is generally some sort of horror.
4. Trim and make a smooth attenuation to the edge so that the place for cutting letters is not visible. It is difficult to apply in case of non-uniform background. It is necessary to manually hide the attenuation when the text has a width less than or equal to the width of the block.
5. Shorten text by inserting dots at the end.

On the implementation of the latest strategy and will be discussed further ...

Trident, presto, and webkit have native support that is included as follows:

overflow : hidden;<br> text-overflow : ellipsis;<br> -o-text-overflow : ellipsis;

Gecko unfortunately only supports single-line xul: label and xul: description ellipses. In addition, it supports the remarkable xbl technology with which you can implement ellipse support for other elements:
')

<? xml version ="1.0" ? > <br> < bindings xmlns ="http://www.mozilla.org/xbl" xmlns:xul ="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" > <br><br> < binding id ="none" > <br> < content >< children /></ content > <br> </ binding > <br><br> < binding id ="ellipsis" > <br> < content > <br> < xul:label crop ="end" >< children /></ xul:label > <br> </ content > <br> < implementation > <br> < field name ="label" > document.getAnonymousNodes( this )[ 0 ] </ field > <br> < field name ="style" > this.label.style </ field > <br> < property name ="display" > <br> < getter > this.style.display </ getter > <br> < setter > if( this.style.display != val ) this.style.display= val </ setter > <br> </ property > <br> < property name ="value" > <br> < getter > this.label.value </ getter > <br> < setter > if( this.label.value != val ) this.label.value= val </ setter > <br> </ property > <br> < method name ="update" > <br> < body > <br> var strings= this.textContent.split( /\s+/g )<br> if( !strings[ 0 ] ) strings.shift()<br> if( !strings[ strings.length - 1 ] ) strings.pop()<br> this.value= strings.join( ' ' )<br> this.display= strings.length ? '' : 'none'<br> </ body > <br> </ method > <br> < constructor > this.update() </ constructor > <br> </ implementation > <br> < handlers > <br> < handler event ="DOMSubtreeModified" > this.update() </ handler > <br> </ handlers > <br> </ binding > <br><br> </ bindings >

There are two bindas: ellipsis turns on ellipsing, and none turns off. They are connected accordingly:

-moz-bindin g: url( 'bindings.xml#ellipsis' );

-moz-binding : url( 'bindings.xml#none' );

When we turn on ellipse, an “anonymous” element xul: label is created, which is not seen by the usual house-methods, but is located exactly between the original element and its children. Unfortunately, xul: label shortens the text only if it is specified through the value attribute, so you have to copy the text content from the source element into it each time the child subtree changes.

In addition, we have to deal with some features:

1. Manually normalize spaces.
2. Hide xul: label when it has empty content.

You also have to put up with some drawbacks:

1. Crossbrowser can only ellipse text that is forcibly stretched into one line.
2. Inside the source element there should be only text, for the Mozilla will still cut out all tags.
3. In Mozilla, it is impossible to select a text that has been subjected to omnogostisivanie

If you have an idea how to overcome these shortcomings - welcome in the comments.

In order not to engage in copy-paste and avoid possible conflicts, I propose the preparation of css-rules:

.v-ellip, v\:ellip {<br> text-overflow : ellipsis;<br> -o-text-overflow : ellipsis;<br> -moz-binding : url( 'bindings.xml#ellipsis' );<br> white-space : nowrap;<br> overflow : hidden;<br> display : inline-block;<br> max-width : 100%;<br>}

Here are some examples of its use:

< body xmlns:v ="urn:markup:visual" > <br><br> < p > <br> < a href ="#" >< v:ellip ><! -- :- -- ></ v:ellip ></ a > <br> </ p > <br> <br> < p > <br> < a href ="#" class ="v-ellip" > - </ a > <br> </ p > <br> <br> < p >< v:ellip > <br> <br> <br> </ v:ellip ></ p > <br><br> </ body >

Try it now for just 99.9 cents!