CSS3 text-overflow intercept Text display ...

Reprint Http://www.w3cplus.com/content/css3-text-overflow

The text effects property in CSS3 has a total of three; Text-shadow;text-overflow;word-wrap. Among them, Text-shadow is a common attribute in CSS3, in CSS3 text-show, specifically describes the characteristics of Text-shadow and how to use it. Today we are going to learn about another property in CSS3 about text effects: the use of Text-overflow.

Everyone in the usual Web page production must have encountered the problem of content overflow , such as the article list is very long, and its width is limited, at this time the content will be more than the width (... Display The previous implementation of this effect is by the background program intercept a certain number of characters in the foreground output, the other way is to use JS intercept a certain number of characters to achieve. However, these two methods have their shortcomings, such as the Chinese and English calculation of the width of the problem, this value is not good calculation, so that the interception of characters is not good control, thus its universality is also poor. So today, let's try the Text-overflow attribute in CSS3 to see how he can achieve such an effect.

Grammar:

  Text-overflow:clip | Ellipsis

Value Description:

1, clip: Indicates that the ellipsis (...) is not displayed, but simply cut, need to be in a certain height range with the Overflow:hidden attribute to use , if not fit the words will have no effect;

2, Ellipsis: the object text overflow will show the ellipsis (...), need to cooperate with Overflow:hidden;white-space:nowrap to be used in order to have effect .

Compatible browsers

1, Text-overflow:clip

2, Text-overflow:ellipsis

Text-overflow:clip all browsers are supported, but text-overflow:ellipsis only Firefox does not support, but there are some ways to solve the problem, this problem is discussed together, we start with a simple. Text-overflow:ellipsis should be prefixed with "-o-" when applied under Opera browser.

Let's take a look at the use of clip in Text-overflow, let's take a look at the following code:

Html Code

<div class= "Demo Text-overflow-clip" >
      test Overflow clip effect test overflow clip effect text overflow clip eff ECT
   </div>

CSS Code:

  . demo {
    width:100px;
    padding:10px;
    border:1px solid #ccc;
  }
  . text-overflow-clip {
    text-overflow:clip;
  }

Effect:

We can clearly see the text-overflow:clip from the above effect chart; The text does not have any truncation, at this time the DIV automatically brace high to adapt to the height of the content. Then you can delete the Text-overflow:clip in the local to see the effect. You will find that there is no text-overflow:clip is the same, that need to do. Previously said need to be in a certain height range with Overflow:hidden in order to have effect . Now add the 50px height and Overflow:hidden attribute to this div:

. text-overflow-clip {
   text-overflow:clip;
   Overflow:hidden;
   height:50px;
 }

Effect:

Here I propose a bold attempt to text-overflow:clip the above code.

  . text-overflow-clip {
    /*text-overflow:clip;*/
    Overflow:hidden;
    height:50px;
  }

Effect:

Now compare the two renderings to see what the difference is. Needless to say, we all know that they are the same effect, then I need to explain here is:Text-overflow:clip This property in our actual application is not meaningful at all , Because he left the height and overflow without any effect, when he had these two properties together, the effect was the same as we set the Overflow:hidden effect, so we could use the overflow in the actual application: Hidden to achieve such an effect. In other words, the individual text-overflow:clip does not have any cut -off effect.

Here we mainly look at the use of the Text-overflow:ellipsis attribute, beginning with mention, text-overflow:ellipsis in conjunction with Overflow:hidden;white-space: The NoWrap property can be used instead of the caption intercept function, which helps the search engine, for example, we have 20 characters in the title, and its width can only be set to 100px, if the title of the interception function, then the title is not complete, if we use Text-overflow: Ellipsis, the title output is complete, except that it cannot be fully displayed by its element container size limit, at this point (...) Instead of the hidden part. In other words, the text-overflow:ellipsis attribute only acts as an annotation, why does it say so. This is demonstrated by an example below.

Html Code:

   <div class= "Demo text-overflow-ellipsis" > Use me to test text-overflow:ellipsis performance and how to use it. </div>

CSS Code:

  . text-overflow {
    -o-text-overflow:ellipsis;
    text-overflow:ellipsis;		  
  }

Effect:

From the effect picture, when using the Text-overflow:ellipsis property alone, no effect is displayed, and no truncation of the text will increase (...). Now let's add a height limit to this.

  . text-overflow-ellipsis {
     -o-text-overflow:ellipsis;
     text-overflow:ellipsis;
     height:30px;		  
  }

Effect:

The contents of the Div are overrun, the div container is bursting, and we add the next attribute Overflow:hidden

. text-overflow-ellipsis{
    -o-text-overflow:ellipsis;
    text-overflow:ellipsis;
    height:30px;		  
    Overflow:hidden;
 }

Effect:

Now the overflow text content is hidden, but the final effect is still one step away from us, that is, the notation of the same symbol (...), as stated in the beginning: Text-overflow:ellipsis is required with Overflow:hidden;white-space: NoWrap two properties in conjunction with the effect, the previous step with the Overfow:hidden property, followed by White-space:nowrap, so that the text does not wrap

. text-overflow-ellipsis {
    -o-text-overflow:ellipsis;
    text-overflow:ellipsis;
    height:30px;		  
    Overflow:hidden;
    White-space:nowrap;
  }

Effect:

At this point, the final effect will come out (but Firefox still has no effect, as shown above, because the previous said Firefox does not support this property, the following will show how to let Firefox have this effect). Through these steps, everyone knows how to use the Text-overflow:ellipsis property, then finally I remind you to do a test, we now put the height of the div to see if it will affect

. text-overflow-ellipsis {
   -o-text-overflow:ellipsis;
   text-overflow:ellipsis;
   /* height:30px;*/	  
   Overflow:hidden;
   White-space:nowrap;
  }

Effect:

The effect doesn't change, that's because we've added white-space:nowrap to make the text content mandatory on the same line. After each step of the test, it is confirmed again: theText-overflow:ellipsis property needs to be combined with Overflow:hidden and white-space:nowrap two properties to be effective . Unfortunately, text-overflow:ellipsis to the present firefox4.0 does not support this attribute, it is expected that the next version can support. Then Firefox does not support, there is no way to make it compatible. The answer is yes, so let's take a look at how to get Firefox to support the Text-overflow:ellipsis property as well.

first, the pseudo-class ──:after of Firefox

Using Firefox pseudo-class ": After" to use the Firefox browser to achieve text-overflow:ellipsis effect ideas from the CSS3 selector pseudo-Class "Clearfix:after", using ": After" Can add the ellipsis (...) that we need to display after the content. , and its structure needs to be changed, put the content in a <span> </span> (of course you can also use other tags, but span is more convenient to use, do not need to adjust the position of the ellipsis), so we use pseudo-class added "content:" ... ' "floating will not run to the top of the text, the next we will see how its specific code implementation:

HTML Code:

  <div class= "Demo Text-overflow" >
     <span>>est ah,test ah,test ah,test ah,test ah,test AH,test AH,test Ah,test ah,test ah,test ah,test ah,test ah</span>
  </div>

CSS Code:

. text-overflow {
    Overflow:hidden;/* Clear float */
 }
 /*safari,opera,ie effect */
 . Text-overflow span{
   Display:block;
   width:100px; /* Set Content Width */
   overflow:hidden;/* Hide Overflow text */
   white-space:nowrap;/* make text non-newline */
   -o-text-overflow:ellipsis;/* Ellipsis effect under Opera */
   Text-overflow:ellipsis;/*safari,ie Implementation of the ellipsis effect */
 }
        
 /*firefox Implementation effect */
 @- Moz-document Url-prefix () {	/*@-moz-document Url-perfix () {} is a unique property of Firefox, which is only recognized by the Firefox browser, and can be said to be a hack*/
   . Text-overflow span {
     max-width:70px;/* changes the content width under FF, which is used to place: After add content (...) */
     float:left;/* to float
   *
 /}}
 @-moz-document Url-prefix () {/	
   * exploit: After increase (...) Ellipsis *
   /. Text-overflow:after {
      content: "...";/* Add ellipsis */
      float:left;/* Set float */
      width:25px;/* Ellipsis width *
      /padding-left:5px;/* ellipsis padding, used to pull the distance between content *
      /color: #000;
   }
 }

Effect:

From the effect of the browser we can still see Firefox and other browsers have subtle differences, but I think this is enough to let you Huang enough, will have effect. To mention here, in the code above the code format, I think some friends may not have seen, such as:

  @-moz-document Url-prefix () {	
     css selector {
       CSS style settings
     }
   }

This code is used in Firefox proprietary properties, in other words, only Firefox support the above selector method, said simple, this is in Firefox under the hack, for example, I just want to show the effect in Firefox, Then put the style of the usual written in the overall

In the curly braces. So why do you need to write such a hack here? In fact, I don't need to say that we all know that because ": after" supports the use of this selector in modern browsers, so that there will be one more (...) in the browser that supports the Text-overflow:ellipsis property. Ellipsis, which is not normal to display the effect, and only Firefox does not support, so give it a separate style, let the browser support Text-overflow:ellipsis property display the effect of this property, so that unsupported browsers (such as Firefox) press ": After "added effect is displayed.

Second, jQuery Text Overflow Plugin

The main use of Bramstein provided by the jquery text Overflow plugin to achieve the effect of Firefox under the text-overflow:ellipsis. Let's take a look at the concrete steps of the implementation.

HTML Code:

  <div class= "Demo Text-overflow-js" > I use JS to achieve the effect of text-overflow:ellipsis in Firefox. </div>

Before using the JQuery method, we first have to get the text Overflow plugin js file, you can first download here. After the download is complete, put it in your project file directory and embed it in your page header

  <script type= "Text/javascript" src= ". /js/jquery.text-overflow.js "></script>

Now JS embedded in the page, but does not mean that the effect is out, because the above we only completed the first step, after calling the plug-in, we also need to let the corresponding elements of the JS Textoverflow function, such as our example, we need to give this name " Text-overflow-js "Div call Textoverflow () function

   <script type= "Text/javascript" >
      $ (". Text-overflow-js"). Textoverflow ();
   </script>

Here's a brief introduction to the Textoverflow () function, the Textoverflow () function supports two parameters: Str and autoupdate, where Str refers to the content to append, the default value is "...", or it can be an HTML tag, but the string itself is not truncated. For example, we need to show a read more after "...". Then we can write:

 <script type= "Text/javascript" > $ (". Text-overflow-js"). Textoverflow (' ... <a href=
  "# ' + index + '" >read more</a> '); </script>