Detailed CSS in the middle of a single row, two rows left, more than two lines with the end of the ellipsis

solve the problem without regard to compatibility, the topic of unrestrained, think of what to say, if there is a problem you feel the unusual CSSProperty , hurry up and cram it.

Constantly updated, constantly updated, constantly updated, important things to say three times.

5, single-line center display text, multi-row left display, up to two lines more than the end of the ellipsis

That's a bad question, my brother.

The topic is the above requirements, the use of pure CSS, complete single-line text center display text, multi-row left display, up to two lines more than the end of the ellipsis, the effect is as follows:

Do not want to see the long-winded can first look at the effect:-webkit-core Demo poke Me

The next step is to achieve this effect.

First is the single-line center, multi-row left

Center need to use text-align:center , left is the default value that is text-align:left . If the two combine to achieve a single-line center, multi-row left? This requires one more label, assuming that at first we define the following:

Now, we're in the h2 middle, nesting more than one layer of labels p :


We let the inner layer of the p left text-align:left , the outer h2 center text-align:center , and will be p set to display:inline-block use the inline-block element can be text-align:center the parent center of the attribute, so that you can achieve a single-line center, multi-row left, CSS as follows:

p {    Display:inline-block;    Text-align:left;} h2{    Text-align:center;}
The results are as follows:

Out of two lines omitted

After completing the first step, the next thing to do is to show the ellipsis in excess of two lines.

Multi-line ellipsis is a special new CSS property that can be implemented, but some compatibility is not very good. The main use of the following several:


  

 
   
 
    
Display:-webkit-box; Set display to show the object as an elastic telescopic box model
 
    
-webkit-line-clamp:2; Limit the number of lines of text displayed in a block element
 
    
-webkit-box-orient:vertical; The child elements of the specified box should be arranged horizontally or vertically
 
   

  
The above 3 styles fit together overflow : hidden and text-overflow: ellipsis can be webkit omitted under the kernel with multiple lines. Okay, we'll add a total of 5 styles to the p element.

p {    Display:inline-block;    Text-align:left;    Display:-webkit-box;    -webkit-line-clamp:2;    -webkit-box-orient:vertical;} h2{    Text-align:center;}
Look at the following results:


(under the-webkit-kernel browser), it is found that, although the two lines are omitted, the first line is returned to the left and not centered .

Look back at the elements in the CSS above p , the reason is that we first set display: inline-block , is the next set display: -webkit-box to cover out, so no longer the inline-block intrinsic element of the feature p occupies a whole line, it is naturally no longer centered, and become a normal left-hand exhibition Shown

Remember above we solve the single-row center, multi-line left-hand method? We have added a layer of labels above to solve the problem, here we add a layer of labels, as follows:


Here, we add another layer of em labels, and then,


   

 
    
 
     
Set em todisplay: -webkit-box
 
     
Set p toinline-block
 
     
Set h2 totext-align: center
 
    

   
Hey! By setting up more layers of labels, solve the problem of display, solve the problem perfectly, and then look at the effect, as in the beginning:


-webkit-Core Demo poke Me

Method Two: Pseudo-element single-line absolute positioning head-up

Yes, there is a second way ...

Above, we used a three-layer nested label to center the first line.

This time we'll change our mind, using only two layers of labels, but we'll add more rows. The structure is as follows:

<p class= "Container" >    
Here, a new row class tag is added, the pesudo p label content is consistent with the text content, but we limit the dead class="pesudo" p label height to the line above and set it, p line-height overflow:hidden then this c12/> tags can only display a single line of text, followed by absolute positioning, positioning to h2 the top, and then set the text-align:center background color and background color h2 consistent.

In this way, a maximum of one line and a centered class="pesudo" p tag overlap the original p label. It is a single-line center, and the first row of rows is full, which solves our problem. Multi-line ellipsis is the same as method one. The CSS is as follows:

<p class= "container" >