css text truncation, beyond the text ellipsis display

1. Single-line text truncation

p { 
    text-overflow : ellipsis ; /* Show ellipsis instead of cropped text */ 
    white-space : nowrap ; /* whitespace is handled without wrapping */ 
    overflow : hidden ; /* overflow hidden */ 
}    

Effect:

2. Multi-line text truncation

p { 
    display : -webkit-box ; /* Set the box as a flexible box container */ 
    -webkit-box-orient : vertical ; /* Set the internal arrangement of the box to be vertical */ 
    -webkit-line-clamp : 2 ; / * Display two lines */ 
    text-overflow : ellipsis ; /* Replace the newly created text with ellipsis */ 
    overflow : hidden ; /* Overflow hidden */ 
    /* If it is pure letters and numbers, you need to add the following sentence */ 
    word-break : break-all ;
}

Effect