省略記号とカスタム カウンタ (「...123 T.」) を使用して 2 行目以降のテキスト オーバーフローを非表示にするにはどうすればよいですか?

.container {
  max-width: 200px;
  margin: 5px;
}

.main-text {
  line-height: 1.2em; /* line height */
  max-height: calc(2 * 1.2em); /* limit height to 2 lines */
  overflow: hidden;
  display: inline-block;
  position: relative;
}

.main-text:after {
  content: "123 T.";
  display: inline-block;
  width: 40px;
  position: relative;
  z-index: 999;
  /* big box shadow to hide the ellipsis */
  box-shadow:
    40px 0 0 #fff,
    80px 0 0 #fff,
    120px 0 0 #fff,
    160px 0 0 #fff;
  color: #8e8f8f;
  font-size: 10px;
  background: #fff; /* cover text beneath */
  margin-left: 2px;
}

.main-text span {
  position: absolute;
  /* bottom right position */
  top: 1.2em; /* 1 line height */
  right: 0;
  padding: 0 3px;
  background: #fff; /* cover text beneath */
}

.main-text span:before {
  content: "..."; /* ellipsis */
}

.main-text span:after {
  content: "123 T.";
  color: #8e8f8f;
  font-size: 10px;
}

<div class="container">
  <div class="main-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus mi, dapibus sit amet posuere eu, porttitor condimentum nulla. Donec convallis lorem justo, eget malesuada lorem tempor vitae. Aliquam sollicitudin lacus ipsum, at tincidunt ante condimentum
    vitae. <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lo <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum dolor sit ameta, adipiscing elit. Nam metus <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum dolor sit ameta, adipiscing elit <span></span>
  </div>
</div>