CSS, j & #39; s single line, multi-line text overflow display ellipsis, css ellipsis

CSS, j's single line, multi-line text overflow display ellipsis, css ellipsis

In the project, the vertical length of the initial Page is too long due to excessive description texts, which also reduces the utilization of the remaining information. Therefore, when there are too many texts, it is necessary to initialize the limit on the number of lines.

1. CSS single-line text overflow, displaying ellipsis

<Div style = "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"> I want to overflow, I want overflow, I want overflow, I want to overflow, I want overflow. </Div>

2. CSS multi-line text overflow, displaying ellipsis

<Div style = "overflow: hidden; display:-webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;"> I WANT TO overflow, multi-line text, I want to Overflow, multi-line text, I want overflow, multi-line text, I want to Overflow, multi-line text, I want overflow, multi-line text, I WANT TO Overflow, multi-line text. </Div>

The above two types of labels only contain text, and sometimes we encounter such a situation.

<Div> <p> <span> I am content </span> </p> <p> <span> content </span> </p> </div>

3. The third solution is to solve the problems encountered above.

I have read many examples on the internet, each of which has its own advantages. I use a fixed line-height, and a line feed is also at a fixed height, such as line-height: 20px; every time we change the blank line, we also need to set the blank line to 20px, so that we can use a multiple of 20 to reasonably display the number of rows and content to be displayed.

<Div class = "text"> <p> do not want to change the world, but do you want to watch the sunrise? Want to experience the legendary morning run? Want to meet the goddess of male in the morning run? Would you like to see if there is anyone in the library or training ground at a.m? Want to breathe the air that has not been over-rendered by vehicle exhaust? Want to cook breakfast for your lover? You have to get up early! Last night? How many pages are there for postgraduate entrance exams? Catch a plane or train? You have to get up early! If you don't want to go to work, you have to get up early ~ </P> <p> you are welcome to join the 21-day early morning program. One day is in the morning. We wish you a wonderful day in the morning! </P> <span class = "points">... </span> </div>

.text{color:#707070;padding:0 12px;position:relative;line-height:20px;overflow:hidden;margin-bottom:12px;max-height:60px;}.points{content:"...";position:absolute;bottom:0;right:16px;padding-left:40px;font-size:18px;letter-spacing:3px;background: -webkit-linear-gradient(left, transparent, #fff 55%);background: -o-linear-gradient(right, transparent, #fff 55%);background: -moz-linear-gradient(right, transparent, #fff 55%);background: linear-gradient(to right, transparent, #fff 55%);}.text p{margin:0;}.text p+p{margin-top:20px;}

// Var showBoo = true; $ ('. de-box. text '). on ('click', function () {if (showBoo) {console. log (1); $ ('. de-box .text'0000.css ('maxheight', 'None'); $ ('. de-box. points '). hide (); showBoo = false;} else {$ ('. de-box .text'0000.css ('maxheight', '60px '); $ ('. de-box. points '). show (); showBoo = true ;};});

In this case, there will be a blank line display in the line feed. This problem should be kept first. Today, I am tired.