Talk about some interesting CSS topics (v)-Single-line center, two rows left, more than two lines omitted

Folio Series, discuss some interesting CSS topics, aside from practicality, some topics in order to broaden the problem-solving ideas, in addition, involves some easy to ignore CSS details.

Problem-solving does not consider compatibility, the topic of unrestrained, think of what to say, if you feel the problem in the CSS properties of the rare, hurriedly to cram it.

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

Talk about some interesting CSS topics (i)--how to implement the vertical bar on the left

Talk about some interesting CSS topics (II.)--On the box model from the realization of stripe border

Talk about some interesting CSS topics (iii)--how much does stacking order and stack context know?

Talk about some interesting CSS topics (iv)--from the reflection, talk about CSS inheritance inherit

All topics are summarized on my Github.

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;} 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 .
Looking back at the elements in the CSS above p , the reason is that the first setting display: inline-block , the next set display: -webkit-box to cover out, so no longer the inline-block internal elements of the feature p occupy a whole line, it is naturally no longer centered, and become the normal left to show.
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:
<div 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 height of the dead label to the class="pesudo" p line above and p set it line-height overflow:hidden , then this 
     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:
<div class= "Container" >    
-webkit-Core Demo poke Me
All topics are aggregated on my Github and sent to blogs hoping to get more communication.
To this end of this article, if there are any questions or suggestions, you can communicate a lot, original articles, writing limited, Caishuxueqian, if there is not in the text, million hope to inform.
Talk about some interesting CSS topics (v)-Single-line center, two rows left, more than two lines omitted