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

Source: Internet
Author: User
Tags xmlns

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.