如何在 CSS 中的多行文本的第 3 行的最后一个字中放置 3 个点

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.You 可以通过减小浏览器的大小来查看效果 window。

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

如何在 CSS 中的多行文本的第 3 行的最后一个字中放置 3 个点

How can I place the 3 dots in the last word of the 3rd line of a mutli-line text in CSS

html

css

overflow