Как я могу поместить 3 точки в последнем слове 3-й строки многострочного текста в CSS

Question

У меня следующий css код:

.description-text {
        overflow: hidden;
        position: relative;
        line-height: 1.375em;
        max-height: 4.125em;
        /* margin-right: -1em;
        padding-right: 1em; */
        font-size: 16px;
        margin-bottom: 0px;
        color: #7a7a7a;

        &:before {
          content: '...';
          position: absolute;
          right: 4.125em;
          bottom: 0;
        }

        &:after {
          content: '...';
          position: absolute;
          //right: 0;
          height: 3rem;
          margin-top: 0.2rem;
        }

Мой html элемент:

<p class="description-text"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>

Я пытаюсь показать только 3 строки из приведенного выше текста и добавьте в конце последнего символа 3 точки. Я достиг этого. Моя проблема в том, что я хочу поставить 3 точки точно в конце текста.

Есть предложения? Я не хочу делать это, оправдывая выравнивание текста. Мне нужно решение, которое работает для любого типа текста, который пользователь может поместить в элемент <p>.

Answer 1

Вы можете сделать это с помощью этого CSS. Вы можете увидеть эффект, уменьшив размер окна браузера.

https://codepen.io/Rishab2019/pen/bGVRxLO

  .description-text {

    position: relative;
    line-height: 1.375em;
    max-height: 4.125em;
    /* margin-right: -1em;
    padding-right: 1em; */
    font-size: 16px;
    margin-bottom: 0px;
    color: #7a7a7a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;


   }

    &:before {
      content: '...';
      position: absolute;
      right: 4.125em;
      bottom: 0;
    }

    &:after {
      content: '...';
      position: absolute;
      //right: 0;
      height: 3rem;
      margin-top: 0.2rem;
    }