CSS implements text display in two lines

renderings

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;

• text-overflow

A CSS property that determines how to signal to the user that overflow content is not displayed. It can be clipped, display an ellipsis ('…'), or display a custom string.

• -webkit-line-clamp

CSS property to limit the content of a block container to a specified number of lines.
It is only available when the display property is set to -webkit-box or -webkit-inline-box and the -webkit-box-orient (en-US) property is set to vertical In
most cases, you also need to set the overflow attribute to hidden, otherwise, the content inside will not be cut, and the ellipsis (ellipsis) will be displayed after the content is displayed as the specified number of lines. When it is applied to the
anchor (anchor) element, the interception action can occur in the middle of the text, not necessarily at the end.

• overflow

The CSS property -wrap is used to indicate whether the browser allows such words to break a line break when a string that cannot be split is too long to fill its wrapping box, in order to prevent it from overflowing. In contrast to word-break, overflow-wrap only produces a break if it cannot fit an entire word on its own line without overflowing.

Note: The word-wrap** property was originally a private property of Microsoft, and it has been renamed overflow-wrap in the current CSS3 text specification draft. word-wrap is now considered an "alias" for overflow-wrap. Stable browser versions of Google Chrome and Opera support this new syntax. **

• white-space

CSS property is used to set how to handle whitespace (en-US) in the element.

.pay_row_1{
    
    
      padding: 5px;
      height: auto;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      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;
    }

 <div class="pay_row_1">
        <span class="tag_txt">京东贴息</span>
        <span class="pay_title">{
   
   {item}}</span>
      </div>