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,
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" >