JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta content="width=device-width" name="viewport">

    <style type="text/css">
      body {
        width: 360px;
      }

      div>p {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 20px;
      }
    </style>
  </head>

  <body>

    <div class="testdiv" style="height: 20px;border: 1px solid red;"> </div>
    <input type="button"  id="test" value=" try this click here to change red-bordered div's height " />

    the ellipsis word below '...' will disappear

    <div>
      <p>中文名称中文名称中文名称中文名称中文名称中文名称中文名称中文名称中文名（中文名称）</p>
      <p>tryencgendafkjsakdfhask dhfkdjshtryencg endafkjsakdfhaskdhfkdjsh(asdfsadfsadf)</p>
    </div>

  </body>

</html>

JavaScript

$('#test').on('click', function() {
        $('.testdiv').css('height', '80px');
      })