You can limit the contents of a block container to a specified number of rows. After exceeding the number of rows, the “…” is displayed on the last row
This is a normal display
display: -webkit-box; /* Value must be - WebKit box or - WebKit inline box*/ -webkit-box-orient: vertical; /* Value must be vertical*/ -webkit-line-clamp: 2; /* The value is a number, indicating how many lines are displayed*/ overflow: hidden;
This is the display with line clamp added
Reset all properties except Unicode bidi and direction to their initial values or inherited values.
all: unset; /*initial | inherit | unset*/
Initial changes the value of all attributes of the element to the initial value.
Inherit changes the value of the element to the value inherited from the parent element
Unset if the value of the attribute of the element is inheritable, reset to the inherited value of the parent element, otherwise change to the initial value.
It is used to define the color of caret. Here, the caret is the flickering vertical bar in the editable area of a web page to indicate where the user’s input will be inserted.
5、clip-path / shape-outside
The clip path property uses clipping to create the displayable area of an element. The part inside the area is displayed, and the part outside the area is hidden. A similar clipping is SVG’s clippath.
Clip path values have the following graphics
Inset (xxx): cut to rectangle
Circle (XX): cut to prototype
Ellipse (xxx): crop to ellipse
Polygon (XX): crop to polygon
None: no clipping
Preparation before example
<div style="width: 500px; height: 500px;text-align: left;background-color:gray;color:white" > <img class="clip-mode" style="float: left; margin:20px" width="150" /> We had agreed, my companion and I, that I should call for him at his house, after dinner, not later than eleven o’clock. This athletic young Frenchman belongs to a small set of Parisian sportsmen, who have taken up “ballooning” as a pastime. After having exhausted all the sensations that are to be found in ordinary sports, even those of “automobiling” at a breakneck speed, the members of the “Aéro Club” now seek in the air, where they indulge in all kinds of daring feats, the nerve-racking excitement that they have ceased to find on earth. </div>
clip-path: circle(40%); // The radius is 40%, and the center is the center by default
clip-path: ellipse(130px 140px at 10% 20%);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
We can see how the above figure is cut. The invisible box on the outside is always rectangular, that is to say, the text is always surrounded by a rectangular style.
So is there a way to make the text stick tightly around the cut figure?
Yes, use the shape outside property
Shape outside defines a shape that can be non rectangular, around which adjacent inline content should be wrapped. By default, inline content surrounds its rectangular margin;
Default rectangle wrap
clip-path: none; shape-outside: none
clip-path: circle(40%); shape-outside: circle(40%);
clip-path: ellipse(130px 140px at 10% 20%); shape-outside: ellipse(130px 140px at 20% 20%);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
Of course, you don’t have to use circle wrapping in circle clipping. You can use polygon wrapping in circle clipping and diamond wrapping in polygon clipping. In a word, it doesn’t matter between the two. They don’t match each other. It’s up to you to define it
6、object-fit / object-position
The object fit property specifies how the content of the replaceable element should fit into the box determined by its height and width.
Object position property to specify the alignment of the content object of the replaced element within the element box.
Note: the replaceable elements are iframe, video, embed, IMG, and some are also replaceable elements in the case of features, such as option, audio, canvas, and object
Preparation before example
<div style="width: 300px; height: 300px; background-color:gray;"> <img class="clip-mode" style="height: 100%; width: 100%;"> </div>
The image must be set to 100% width and height, that is, it cannot exceed the parent container before object fit can be set, otherwise it is meaningless.
Fill inThe image will be pulled to 100% of the parent container in width and height to fit the parent container
ContainThe image will not deform, the image will be scaled according to its own scale, the whole image will be put into the parent container, and the shorter edge will be automatically filled with blank.
CoverThe image will not deform, and the image will be scaled according to its own scale. The whole image will be put into the parent container. According to the shortest edge of the image, the parent container will be included as the benchmark. Longer edges overflow
noneIt has nothing to do with the width and height of the parent container. Display the original aspect ratio of the image, and place it in the “center” position of the parent container based on the “center” of the image.
scale-downThe size of the content is the same as one of none or contain, depending on who gets the smaller size of the object between them.
If the image is larger than the parent container, the effect of contain is used. If the image is smaller than the parent container, the effect of none is used.
In the object fit demonstration above, we found that the alignment of replaceable elements is automatic.
For example, object fit: fill; Align the upper left corner of the container with the upper left corner of the parent container.
object-fit: none; Align the center of the parent container with the center of the parent container, and so on.
But do we want to change the alignment manually??
have access toobject-positionAttribute, which specifies the position of the content of the replaceable element in its content box.
object-position: 10px 10px; PX can be set. The first value represents the distance to the left of the parent container, and the second value represents the distance to the top of the parent container. Only one value represents the distance to the left of the parent container. You can also set the% value, but it will only work if there is a blank on one side. If there is no blank and the parent element is just full, it will not work. Setting PX doesn’t have such a problem. Anything will work later.
object-position: right top; Keywords can be set. The first value keyword can be set (left | center | right), and the second keyword can be set (top | center | bottom). At this time, it does not indicate the distance from the left or top, but the position of the parent element.
object-fit: fill; object-position: 50px 50px; // 10px from the left, 10% from the top
Comparison before and after adding object position:
object-fit: contain; object-position: right top; // Stop at the top right
Comparison before and after adding object position:
Defining a normal or deformed font appearance for a font only means that when there are multiple fonts to choose from, the most suitable size will be selected for the font.
Normal default font
Semi condensed, condensed, extra condensed, ultra condensed are smaller than the default font
Semi expanded, expanded, extra expanded, ultra expanded are larger than the default font
You can control the use of special characters in capital letters.
- Normal turns off the use of all special character variants.
- Small caps allows the use of small capital letters (OpenType feature: small CP). A small capital letter is a letter in upper case but of the same size as the corresponding lowercase letter.
- All small caps converts all uppercase and lowercase letters to small uppercase letters（ OpenType feature: c2sc, SMPP).
- Petite caps allows the use of extra small capital letters (OpenType feature: pcap).
- All Petite caps converts all uppercase and lowercase letters to small uppercase letters（ OpenType feature: c2pc, pcap).
- Unicase allows the conversion of uppercase letters to a mixture of small uppercase letters and ordinary lowercase letters (OpenType feature: UNIC).
- Titling caps allows initial capitalization (OpenType attribute: titl). Uppercase variant characters are usually designed to be used with lowercase letters. In the title sequence, if you use capital letters, it may bring too strong visual effect. Capital letters are used to deal with this situation.
Control the use of substitution symbols for East Asian characters (such as Japanese and Chinese, Korean, etc.).
There are several values
normal; ruby; jis78; jis83; jis90; jis04; simplified; traditional; full-width; proportional-width
10、max-content / min-content / fill-available / fit-content
These values can be used in the width, height, min width, min height, max width and Max height attributes.
Display must be inline block or block, otherwise the above value will not work.
Elements fill the available space. The reference datum is the width and height of the parent element.
Div like child element can support the width of parent element, and fill available can support not only the width but also the height.
Code before the example
<div style="width: 300px; height: 100px; background-color:gray;"> <span style="display:inline-block;background-color: burlywood;" >This is the content of the child element < / span > </div>
Different performance of setting fill available on span
What if there is an element in it, IMG? It is also an inline block, which should also satisfy the situation.
We can see that the difference between img and span is that when width or height is set, the whole image will be scaled according to its own scale.
Its width or height will be automatically adjusted to just accommodate the element with the longest length (calculated according to the text when it does not wrap).
The reference datum is the width and height of the child element.
<div class="parent"> <div class="current" style="width: 200px; height: 300px; background-color:gray;"> <p>This is a normal line of P elements with text content</p> <img/> </div> </div>
When setting Max content to current div, it has different performance.
Its width or height will be automatically adjusted to just fit the element with the largest “minimum width value” in the child elements. The remaining super long elements will either wrap or overflow
The reference datum is the width and height of the “minimum width value” of the child element.
What is the minimum width value?
For example, the minimum width of an image is the original width and height of the image; If it is a string of Chinese characters, the minimum width is the width and height of a single Chinese character; If it is a string of English words, the minimum width value is the one with the longest word in it.
It means that the element automatically expands and shrinks to the width of the content. The difference between Max content and Max content is that it is just ready to accommodate the longest element in the child elements.
The difference is that Max content is calculated according to the text when it does not wrap. If it exceeds the parent element, it does not wrap and directly generates a scroll bar; When fit content exceeds the parent element, it will wrap and no scroll bar will be generated.
This is different from the above Fit content value. It is a function used in grid layout.
See grid layout for details.
It’s relatively simple. You can view it
When the user triggers the scrolling operation through the API, the CSS property scroll behavior specifies the scrolling behavior for a scrolling box to arrive smoothly or immediately
14、max() / min()
Max is the largest of the two; The Min function takes the minimum between the two.
Max, min can be used in any place where < length >, < frequency >, < angle >, < time >, < percentage >, < number >, or < integer > can be set
width: max(50vw, 300px); width: min(50vw, 300px);
The clamp function takes the middle value between the three defined values, which is the size in the middle, not the position in the middle,
clamp(MIN, VAL, MAX)
Like Max and min functions, it can be used in any place where the equivalence of < length >, < frequency >, < angle >, < time >, < percentage >, < number >, or < integer > can be set
font-size: clamp(1px, 3px, 2px); // The median value is 2px font-size: clamp(1px, 3px, 5px); // The median value is 3px font-size: clamp(4px, 3px, 5px); // The median value is 4PX
width: clamp(200rem, 25vw, 150px); // Take the middle of the three
In gradients, we know that there are:
- Linear gradient: the color changes linearly from one direction to another.
- Radial gradient, radiating from a certain point along the ring.
In addition, there is a kind of gradient called “taper gradient”. It’s a gradient that rotates in the fan direction around the center point (not radiates from the center point)
This is the difference between taper and radial gradients
background: conic-gradient(red, orange, black, green, blue);
By default, the clock rotates clockwise from 12 o’clock
18、:out-of-range / :in-range
Relatively simple, you can view the official documents
It defines the horizontal or vertical arrangement of text and the writing direction of text in block level elements
Horizontal TB means horizontal writing, from top to bottom
Vertical RL stands for vertical writing, from right to left (that’s how ancient Chinese calligraphy used to write)
Vertical LR stands for vertical writing, from left to right
Note that there is no horizontal BT, don’t make it up
Like the width and height effects of the elements, the size of the box will be changed. But it will override the width and height values.
The difference is that width is the absolute horizontal direction and height is the absolute vertical direction;
In line size is a relative horizontal direction, which can be changed by writing mode
Similar to inline size, but just opposite to inline size, block size sets the value of height by default.