Text display

Text overflow section is displayed

Line set up

white-space: nowrap; // Text does not wrapCopy the code

Overflow partial visibility Settings

overflow: hidden; // Overflow: scroll; // Overflow: visible; // The default value is not hidden outside the overflow element boxCopy the code

text-overflow: ellipsis; // Overflow is denoted by ellipsisCopy the code

For the maximum number of lines displayed in block containers, you can use the -webkit-line-clamp attribute to set the value. However, there are certain prerequisites for using this attribute:

display: -webkit-box; // Display webkit-box-orient: vertical; // Arrange the child elements vertically from top to bottom (set the arrangement of the child elements of the flex box)Copy the code

After completing the above Settings, set the maximum number of lines to be displayed as follows:

-webkit-line-clamp: 2; // Display maximum number of rowsCopy the code

example

Show single line, overflow part ellipsis display

Display multiple lines, set the maximum number of lines to display, overflow ellipsis display

1px fine line compatibility issue

If the CSS is set to 1px, the actual visual effect will be thicker than 1px. If the width or height is changed to a decimal, there will be no visual change. After practice, a more effective way is to set the CSS by the transform property, for example:

The transform: scaleY (0.5); ScaleX (0.5); scaleX(0.5); // Horizontal compression 0.5Copy the code