Too much content, the excess is displayed with an ellipsis "..."

The effect diagram is shown in the figure:

1. The first implementation method is realized by using pure css (ps: this method must set the width of the element, otherwise it may have no effect), the code is as follows:

html代码
<!-- 超过长度，用省略号实现，css的方式 -->
<div class="text-ellipsis" style="background: pink;height: 30px;line-height: 30px;">999999999999999999999999</div>

css代码
 /* css超出省略号显示 */
  .text-ellipsis{
    
    
  width:100px;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

2. The second implementation method is to combine js to cut strings, and then use '...' to splice them together (this method can only get the data after cutting if you want to get the element value later, and it is realized by pure css way to obtain complete data), the implementation code is as follows:

html代码
<div id="test1" style="background: pink;height: 30px;line-height: 30px;width:100px;"></div>

js代码（这里用例jQuery）
    <script>
    let text = '999999999999999999999999';
    let newText;
    if (text.length > 5) {
    
    
        newText = text.slice(0,5) + '...';
    }
    $('#test1').html(newText)
    </script>