The code is as follows:

  display: -webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
Copy the code

Attribute details:

– The webkit-line-clamp CSS property limits the content in a block container to a specified number of lines.

  • It only works if the display property is set to -webkit-box or -webkit-inline-box and the -webkit-box-orient property is set to vertical in most cases, you also need to set overflow property to Hidden, otherwise, the content is not trimmed, and ellipsis is displayed after the content is displayed as a specified number of lines.

  • When applied to the anchor element, the interception action can take place in the middle of the text rather than at the end.

The box-orient CSS property sets whether an element lays out its content horizontally or vertically.

This is a property of the original CSS elastic layout draft, which has been replaced by the latest standard. Flexbox is the current standard.

None of the major browsers currently support box-Orient. Firefox is supported via the private property -moz-box-orient. Safari, Opera, and Chrome are supported via private properties – WebKit-Box-Orient.

Value:

Horizontal Boxes lay out their contents horizontally. Vertical A box arranges its contents vertically. The inline-axis (HTML) box displays its children along an inline axis. Block-axis (HTML) boxes display their children along the block axis. The inline axis and block axis depend on the write mode of the keyword, and in English, correspond to horizontal and vertical directions, respectively.