Web Foreground Technology Learning Summary (1)-css implement full browser-compatible ellipsis

Participated in the project has been for some time, the author of the Web Standard design learning has made a lot of progress. Before learning and practice are Google side reading, only input not output, also rarely communicate with everyone. The project is nearing the end, and it is necessary to summarize, Learn what you learned in the blog park and share the exchange, while restudying, hoping to learn more in this process. So, there is this series of articles.

The beginning of a relatively easy to speak clearly.

There are many ways to intercept fixed-length characters: one is to have the backstage cut and write to the front desk directly. Second, when the DOM after loading with JS interception, the third is to use CSS to do. The first method does not have to do anything for the foreground, but it can cause extra burden on the server; the second method looks good, and can be used across browsers , there is no need to worry about increasing the burden of the server, but in accordance with the progressive enhancement design principles, is not desirable, and JS is generally loaded after the completion of the DOM, so that the entire rendering process will be exposed to the user, experience is relatively bad.

Based on the above considerations, I have adopted a third approach, but I have to consider the problem of Cross-browser. Curiously, in terms of Word interception, Firefox lags behind other browsers, and it doesn't support text-overflow:ellipsis! Google a bit, incredibly foreign cattle people, with Firefox itself unique XUL markup Language for this hack, more perfect solution to this problem. I have summarized and transformed this into a browser-compatible CSS class, which is as follows:

Save the following XML file (with XUL tags) as ellipsis.xml with the relevant CSS in the same directory:

<?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.o nly.xul"
　　>
　　　　<binding　id="ellipsis">
　　　　　　<content>
　　　　　　　　<xul:window>
　　　　　　　　　　<xul:description　crop="end"　 xbl:inherits="value=xbl:text">
　　　　　　　　　　　　<children/>
　　　　　　　　　　</xul:description>
　　　　　　　　</xul:window>
　　　　　　</content>
　　　　</binding>
　　</bindings>

Here is the CSS Class I use:

.ellipsis　{
　　white-space:　nowrap;
　　overflow:　hidden;
　　text-overflow:　ellipsis;/*针对IE和webkit核心(Google　 Chrome,Safari)*/
　　-o-text-overflow:　ellipsis;　/*针对Opera　*/
　　-moz-binding:　url('ellipsis.xml#ellipsis');/*针对　Firefox　进行 XUL的绑定*/
}

The element that uses this class must be a block or inline-block level, with a width attribute.

Like what

<a　class="sample　ellipsis"　 href="/group/miantan">XXXX</a>

Where the sample class is

.sample{
　　display:block;
　　width:14em;
}

This use, you can solve most of the problems, but this method is not perfect, it also has its own shortcomings, it is only to intercept a line of text, if you want to intercept more lines of text, I can only use the JS method.