About text that is implemented with CSS out of the partial display ellipsis

Text out of the partial display ellipsis or more commonly used an effect, recently saw some online methods to practice a bit, found that some of the previous browsers can not be used by the properties are now available, and then studied some, now summarized as follows:

Let's look at the HTML code first:

<div>    <p><span> use CSS to show the effect of ellipses when text is out of width </span></p></div>

CSS code:

div{    width:200px;} span{    Display:block;    width:200px;    Overflow:hidden;    White-space:nowrap;    Text-overflow:ellipsis;}

We can see that it is available to the text-overflow:ellipsis; online says it is an IE specific attribute, other browsers do not support, after practice, now Chrome and Firefox have been supported,

Effects under Chrome:

My Chrome version number:

The effect under Firefox:

My Firefox version number:

Also said opera does not support Text-overflow, for opera words have to use-o-text-overflow:ellipsis, open Gate Browser has not installed so cannot practice, but through the online search has found the answer, Bloggers have said their new version of the Open Gate has been supported by this attribute, look at the blog time is 2012, it seems to have supported the long ago.

Also, these properties in the CSS cannot be small, otherwise the ellipsis cannot be displayed. You can follow this idea to limit the text to one line (white-space:nowrap; (White-space property declares how to handle whitespace in the element during layout)), the line has width (width), and there is an excess of width. Hide the excess (overflow:hidden;), and then follow the ellipsis (text-overflow:ellipsis;).

There is an unconventional method to complement the ellipsis, to use the pseudo-object after, the idea is a label for the content, plus a label to fill the ellipsis with, and add up the width can not exceed the width of their container, otherwise it will be wrapped.

Look at the CSS code:

span{                Display:block;                width:200px;                Overflow:hidden;                White-space:nowrap;            }            p{                clear:both;            }            P span{                float: left;                Max-width:175px;            }            p:after{                "...";            }

This can have the ellipsis effect, but there will be a small problem, we look at the effect:

Under Chrome and under Firefox are the same effect, it is not perfect to see such a method.

And the use of text-overflow:ellipsis to show the ellipsis also has the advantage, can not limit the number of words, SEO is also more friendly, such as our title use this property, the title appears to be intercepted, but search engines are still searching by the full title search, Because the title is not actually intercepted, it just doesn't show up completely.

Of course, this method of control has one of the biggest shortcomings is to control a row, JS can control a number of lines, and is not complex, we are just the case.

In addition to the SEO, recently is reading a book called "Squeeze dry baidu Google", another day to read the notes sorted out. The book has no dry goods, feeling can be attributed to popular science books.

This study not only learned knowledge, but also once again to verify the sentence: The practice of truth. Not only to see more, but also to write more, practice is the only test of the truth of the standard, because it technology development quickly, do not know when not used now can be used, and can use the now can't use, let the code really in their hands over again, this is as a basic programmer of a moral integrity.

About text that is implemented with CSS out of the partial display ellipsis