Поместите текст после точек во второй строке многоточия при переполнении текста

Question

Мне нужно скрыть часть текста длиной более 2 строк и добавить '...123 T.' как индикатор скрытого переполнения, как показано ниже:

What I have so far: https://plnkr.co/edit/NTlv4NpyhRTzJkNQ?preview

Html:

<div class="outside-container">
      <span class="container">
        <span 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 class="small-text">123 T.</span>
      </span>

      <span class="container">
        <span class="main-text">
          Lorem ipsum
        </span>
        <span class="small-text">123 T.</span>
      </span>

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

CSS:

.outside-container {
  width: 200px;
}

.container{
  max-width: 200px;
}

.main-text {
  overflow: hidden;
  vertical-align: middle;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.small-text {
  color: #8e8f8f ;
  font-size: 10px;
  vertical-align: middle;
}

Answer 1

В будущем вы сможете сделать это с помощью только одной строки кода, используя:

line-clamp: 2 "...123 T.";

Более подробную информацию можно найти в спецификации :

Свойство line-clamp является сокращением для свойств max-lines, block-ellipsis и continue.

Оно позволяет ограничить содержимое контейнера блока указанным количеством строк; оставшееся содержимое фрагментировано и не отображается и не измеряется. При желании он также позволяет вставлять содержимое в поле последней строки, чтобы указать непрерывность усеченного / прерванного содержимого.

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

.main-text {
  line-height: 1.2em; /* the height of a line */
  max-height: calc(2 * 1.2em); /* restrict the 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;
  /* a big box-shadow to hide the span element used for 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; /* white background to cover the text behind */
  margin-left:2px;
}

/* this will replace the ellipsis */
.main-text span {
  position: absolute;
  /* position at the bottom right */
  top: 1.2em; /* height of one line */
  right: 0;
  padding: 0 3px;
  background: #fff; /* white background to cover the text behind */
}

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

/* the text after the dots */
.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>

Answer 2

Дает ли следующий код желаемый результат?

.outside-container {
  width: 220px;
}

.container {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-end;
}

.main-text {
  overflow: hidden;  
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-right: 5px;
}

.small-text {
  color: #8e8f8f;
  font-size: 10px;
  white-space: nowrap;
  transform: translateY(-2px);
}

<div class="outside-container">
  <div class="container">
    <span 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 class="small-text">123 T.</span>
  </div>
  <div class="container">
    <span class="main-text">
          Lorem ipsum
        </span>
    <span class="small-text">123 T.</span>
  </div>
  <div class="container">
    <span class="main-text">
          Lorem ipsum dolor sit ameta,  adipiscing elit. Nam metus  Donec
          convallis lorem justo, eget malesuada lorem tempor vitae. Aliqua
        </span>
    <span class="small-text">123 T.</span>
  </div>
</div>