“This is the 8th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Dynamic processing of text length

In front end development, there is always the problem of text display. If we put the data from the back end directly, the problem may exceed the box. At this time, we need to hide the text overflow and show the ellipsis, as shown in the following figure

The rectangle in the figure above is the text overflow situation and response processing mentioned above

  • The first is a single line of text that does not allow line breaks to overflow
  • The second is a single-line text overflow hiding and is replaced with an ellipsis. The main code is as follows
    { 
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
Copy the code
  • The third is multi-line text, which will show the effect of line breaks
  • The fourth is multiple lines of text ellipsis, the code here is to show only two lines of redundant ellipsis, with ellipsis, the code is as follows
    {
        width: 200px;
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
Copy the code

The picture

In projects, remember to set the width and height of the IMG tag when using images. This has several advantages

  • Prevent the size of the image from the back end from being too large to cause abnormal display
  • Place images before they are loaded to avoid rearranging the page from scratch

You can set object-fit: cover to fill the img image with a width/height ratio. You can also set object-position to 50%, 50%. This property is similar to background-position

    img{
        width:100px;
        height:100px;
        object-fit:cover;
        object-position:50% 50%;
    }
Copy the code

Click to select text

Normally we click twice to select a piece of content and three times to select a row of content, but in some scenarios where content needs to be copied quickly, this property can be used

    user-select:all; // Click the selected content
    
    //:: Selection: controls the background color, font color, and font shadow of the selected content
    .text-section::selection{
        background: #f7ec91;
        color: #333;
        text-shadow: 0 0 .5px #aaa, 1px 1px .5px #aaa, 2px 2px .5px #aaa, 3px 3px .5px #aaa, 4px 4px .5px #aaa;
    }
    
    // In some scenarios we may need something not to be selected, such as text in a button, we can use user-select: None to do this
    { 
        -webkit-user-select: none; /* Safari */ 
        -ms-user-select: none; /* IE 10 and IE 11 */ 
        user-select: none; /* Standard syntax */ 
    }
Copy the code