Ellipsis at the end of multiple lines of text

As I am a newbie, many things are a challenge for me. I have activated the blog Park to record various problems encountered in the sharing project. Many of the materials are for reference by others. Thank you!

The latest project is mainly based on an earlier version of Google's kernel. It is too tangled to support linear-gradient in css3! The first question is shared below. The ellipsis (...) is displayed at the end of multiple lines of text.

First, the solution used in the project:

Ellipsis for single line text display

Text-overflow: Clip | ellipsis

Clip: the label is not omitted, but simply cropped.

Ellipsis: displays the omitted mark when the object text overflows.

The Code is as follows:

Text-overflow: ellipsis;

Overflow: hidden;

White-space: nowrap; // prevents line breaks

Width: 200px;

Many people say that Firefox does not support this feature. My version is 19, which can display the effect. I don't think I need to care about this because Internet Explorer is installed for most Windows operating systems in China, when you select Firefox, the latest version must be downloaded, so this bug is irrelevant.

 

Next we will talk about the ellipsis of multiple lines of text. because we think that more than one line of text is invisible, we searched for relevant knowledge to solve this problem.

Xiaoying's blog (http://c7sky.com/text-overflow-ellipsis-on-multilinea-text.html) find related solutions

Google solutions:

Overflow: hidden;

Text-overflow: ellipsis;

Display:-WebKit-box;

-WebKit-line-clamp: 2; // Add a ellipsis to the row

-WebKit-box-Orient: vertical;

Here, I will talk about the display attributes in the next part.

Opera solution:

Overflow: hidden;

White-space: normal;

Height: 3em;

Text-overflow:-o-ellipsis-lastline;

These two are their own private solutions, and they conflict with each other. Google cannot see height, but opera must have height. Therefore, it cannot be used in projects. js must be used to solve this problem.

The HTML is as follows:

<Div class = "figcaption"> <p> As a Microsoft game platform, Xbox has appeared in Windows Phone and Windows 8. Recently, microsoft announced that it would integrate its Zune consumer brand into the Xbox brand. As the Xbox LIVE service became more and more influential, its penetration became wider and wider. </P> </div>

<Div class = "figcaption"> <p> Can I fix a favorite website? Of course! Fix all frequently visited websites to the Start Screen. How to fix it? Open ie10, right-click in the blank area of the web page, and click the "dingtalk" icon in the application bar to fix the problem. </P> </div>

<Div class = "figcaption"> <p> we have introduced the useful colors! Today we will introduce fresh paint, a painting software with different styles. We can use it to draw oil paintings. </P> </div>

<Div class = "figcaption"> <p> you probably can't do it (currently ?) Without a fixed-width font like courier. with a fixed-width font every letter occupies the same horizontal space, so you cocould probably count the letters and multiply the result with the current font size in EMS or exs. then you woshould just have to test how many letters fit on one line, and then break it up. </P> </div>

CSS:

. Figcaption {
Background: # Eee;
Width: pixel PX;
Height: 3em;
Margin: 1em;
}
. Figcaption P {
Margin: 0;
Line-Height: 1.5em;
}

JQ is as follows:

$ (". Figcaption"). Each (function (I ){
VaR divl = $ (this). Height ();
VaR $ P = $ ("P", $ (this). eq (0 );
While ($ P. outerheight ()> divl ){
$ P. Text ($ P. Text (). Replace (/(\ s) * ([a-zA-Z0-9] + | \ W )(\.\.\.)? $ /,"..."));
};
});

Okay. The first share is now!