In the daily development display page, if the amount of a piece of text is too long, subject to the factor of element width, it may not be fully displayed. In order to improve the user experience, we need to display the overflow text as ellipsis at this time

1. Single-line text overflow

  • Text-overflow: Specifies that ellipses are displayed to represent the trimmed text when the text overflows
  • White-space: Sets text to be displayed on one line without line breaks
  • Overflow: If text length exceeds the limit width, hide the overflow
.ellipsis { 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow: hidden; 
 }
Copy the code

2. Multi-line text overflow

  • – Webkit-line-clamp: 2: used to limit the number of lines of text displayed on a block element, in order to achieve this effect it needs to combine other Webkit properties)
  • Display: -webkit-box: combined with 1, displays the object as an elastic stretchy box model
  • -webkit-box-orient: vertical: Used with 1 to set or retrieve the arrangement of the children of a flex box object
  • Overflow: hidden: Text overflow limits the width to hide content
  • Text-overflow: ellipsis: ellipsis: ellipsis: ellipsis: ellipsis: ellipsis: ellipsis: ellipsis Hide the text of the overflow scope
   .ellipsis-2 {
     word-break: break-all;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     overflow: hidden; 
    }
Copy the code