Html 如何在CSS中多行文字的第三行的最后一个单词中放置3个点

我有以下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>

Lorem ipsum door sit amet，consetetur sadipscing elitr，sed diam nonumy eirmod temporal invidund ut ut labour and dolore magna aliquyam erat，sed diam voluptua。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的

我试图只显示上面文本的3行，并在最后一个字符的末尾添加3个点。我做到了这一点。我的问题是我想把3个点正好放在课文的末尾

---

有什么建议吗？我不想通过证明文本对齐的合理性来实现这一点。我想要一个解决方案，该解决方案适用于用户可能放入

元素中的任何类型的文本。
您可以使用此CSS执行此操作。您可以通过减小浏览器窗口的大小来查看效果


  .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;
    }