Some interesting CSS questions (5) -- center a single row, center two rows to the left, omit more than two rows, and css two rows

Some interesting CSS questions (5) -- center a single row, center two rows to the left, omit more than two rows, and css two rows

In this series, we will discuss some interesting CSS questions. Aside from practicality, some questions will be discussed to broaden the ideas for solving the problem. In addition, they will involve CSS details that are easy to ignore.

Compatibility is not taken into consideration in solving the problem. The question is just a blank question. What do you think of? If you have the uncommon CSS attribute in solving the problem, please study it.

Update, update, and update important things three times.

Some interesting CSS questions (1) -- Implementation of the vertical bar on the left

Some interesting CSS questions (2) -- about the box model from the implementation of the striped border

Some interesting CSS questions (III)-How much do I know about the stacked sequence and stack context?

Some interesting CSS questions (4) -- Starting from reflection, talking about how CSS inherits inherit

All questions are summarized in my Github.

 

5. Text is displayed in the center of a single row. Multiple rows are displayed on the left. A maximum of two rows are displayed at the end of a ellipsis.

This question is amazing, my brother.

The question is as follows: use pure CSS to display text in the center of a single line. Multiple lines are displayed on the left. A maximum of two lines are displayed on the left. The result is as follows:

If you don't want to take a long story, you can first look at the effect:-webkit-Demo under the kernel to stamp me

Next, we will implement this effect step by step.

 

The first is to center a single row and multiple rows to the left.

Centertext-align:centerLeft is the default value, that istext-align:left. For example, how can we combine the two to center a single row, while multiple rows are left? In this case, we need to add one more tag. Suppose we define the following at the beginning:

<H2> center a single row and left multiple rows 
Now, we areh2In the middle, multiple layers of labels are nested.p:
<H2> <p> center a single row and left multiple rows </p> 
Let's make the inner layerpLefttext-align:left, Outer layerh2Centertext-align:centerAndpSetdisplay:inline-block, Useinline-blockElement can be parenttext-align:centerIn this way, you can center a single row and multiple rows to the left. CSS is as follows:
p {    display: inline-block;    text-align: left;}h2{    text-align: center;}
The result is as follows:
Ignore if two rows are exceeded
After completing the first step, you need to display the omitted characters in more than two rows.
Multiple-line omitting can be implemented through special new CSS attributes, but some of them are not compatible. It mainly uses the following:

  

 
   
Display:-webkit-box; // set display to display the object as an auto scaling box model.
 
   
-Webkit-line-clamp: 2; // limit the number of lines of text displayed on a block element
 
   
-Webkit-box-orient: vertical; // subelements in the specified box should be arranged horizontally or vertically.

  
Match the above three stylesoverflow : hiddenAndtext-overflow: ellipsisYou can achievewebkitMultiple lines in the kernel are omitted. Okay. We will add a total of five styles mentioned abovepElement
p {    display: inline-block;    text-align: left;}h2{    text-align: center;}
The results are as follows:

(In the-webkit-kernel browser) It is found that, although more than two lines are omitted,However, the first line is changed back to center, but not center..
In the preceding CSSpThe reason is that we setdisplay: inline-block, Which is set laterdisplay: -webkit-boxIt is overwritten, so it is no longerinline-blockInternal featurepThe element occupies a whole row, and naturally it is not centered, but it becomes a normal left-side display.
Do you remember the above solution to center a single row and center multiple rows to the left? We added one more tag to solve the problem. Here we add another tag, as shown below:
<H2> <p> <em> Single Row centered, multiple rows left <em> </p> 
Here, we will add another layeremLabel. Next,

   

 
    
SetemIsdisplay: -webkit-box
 
    
SetpIsinline-block
 
    
Seth2Istext-align: center

   
Hey! By setting more labels, we can solve the display problem and solve the problem perfectly. Then, let's look at the effect, which is the same as the first one:

-Webkit-Demo stamp me in the kernel
Method 2: false element single line absolute positioning blind eye
Yes, there is another way ......
In order to center the first line, we used a layer-3 Nested Tag.
In another way, we only use two-layer labels, but we add one more line. The structure is as follows:
<Div class = "container"> 
Here, a new row of class is addedpesudoOfpTag. The content of the tag is the same as that of the text, but we cannot limit it.class="pesudo"OfpThe height of the label corresponds topThe Row Heightline-heightConsistent and setoverflow:hidden, Then thispA tag can only display a line of text at most. Next, use absolute positioning to locateh2And then settext-align:centerAnd the background color andh2The background color is consistent.
In this way, a maximum of single rows are displayed and the style is centered.class="pesudo"P tags overlap with the originalpLabel. It is represented by the center of a single row, and the first row of multiple rows is full, solving our problem. Multiple rows are omitted in the same way as method 1. CSS:
<Div class = "container"> 
-Webkit-Demo stamp me in the kernel

 
All the questions are summarized on my Github and sent to my blog for more communication.
At the end of this article, if you have any questions or suggestions, you can have a lot of discussions, original articles, and limited writing skills. If there are any mistakes in this article, please kindly advise.