ellipsis_centered_line

by doantrongnam

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>
      Applying an ellipsis to multiline text
    </title>
  </head>

  <body>
    <div class="container">
      <div class="text">
        東ラキ囲断ぼやなで名操ユヌトホ経士づつた庭与づどさぎ辰要わゆぴ然1会いじ含座オチ必陸サレ公愛図カ格時勉旋昔ドぶ。都三セチ家江豊ずげー地実ツネ棋講関っまぜゅ中契ドび善強でだ灼48会シヘル要東ゅをトひ稿雪つくょふ応昔みぶるぽ地図康ぽ。方政年ウセオ件内ちかうぱ新内は担陣ケ間意レマク阪上マナ行4意る下役モヌ動平待能ま坦必ス保然ハモノ必購ぜょ様無うにむ的償まなぽ。
      </div>
    </div>
  </body>

</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:[email protected]&display=swap');

      .container {
        width: 35rem;
        height: 12rem;
      }

      .text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-family: "Noto Sans JP", sans-serif;
      }