CSS realizes two lines of text display

.content {
  text-overflow: ellipsis;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  display: -moz-box;
  -moz-line-clamp: 2;
  -moz-box-orient: vertical;

  overflow-wrap: break-word;
  word-break: break-all;
  white-space: normal;
  overflow: hidden;
}

Several attributes to be explained

• text-overflow CSSProperty determines how to signal the user for an undisplayed overflow It can be cut to display an ellipsis (‘…’) or a custom string

• -webkit-line-clampCSS attributes can limit the content in the block container to a specified number of rows
  It’s only indisplayProperty set to-webkit-boxperhaps-webkit-inline-boxalso-webkit-box-orient (en-US)Property set toverticalOnly when the effect
  In most cases, it also needs to be setoverflowAttribute ishiddenOtherwise, the content will not be trimmed, and an ellipsis will be displayed after the content is displayed as the specified number of lines
  When it is applied to an anchor element, the interception action can take place in the middle of the text, not at the end

• **overflow** CSSattribute-wrapIt is used to indicate whether the browser allows such words to break line breaks to prevent overflow when a string that cannot be separated is too long to fill its package box. Andword-breakcomparison,overflow-wrapInterrupts occur only if the entire word cannot be placed on its own line without overflow.

Note:The word wrap * * attribute was originally a private attribute of Microsoft and has been renamed in the current draft text specification of CSS3overflow-wrap。 Word wrap is now used as an “alias” for overflow wrap. Stable versions of Google Chrome and opera support this new syntax**

• white-spaceCSS properties are used to set how to handle theBlank (EN US)。