CSS text truncation, beyond text ellipsis display

One, single-line text truncation word

{    text-overflow: ellipsis; /* display ellipses instead of cropped text */     white-space: nowrap; /* blank handling does not break line */     Overflow: hidden; /* Overflow Hide */}    

Effect:

Two, multi-line text truncation word

P{Display:-webkit-box;/*Set the box as a flexible box container*/-webkit-box-orient:Vertical;/*set the inner arrangement of boxes to be arranged vertically*/-webkit-line-clamp:2;/*Show two lines*/Text-overflow:ellipsis;/*use ellipses instead of text to build*/Overflow:Hidden;/*Overflow Hide*/    /*for pure letters and numbers, add the following sentence*/Word-break:Break-all;}

Effect

CSS text truncation, beyond text ellipsis display