如果文本溢出，如“...更多”，如何添加自定义文本 [重复]

Question

#limitedText{
      padding:3px 0px 0px 29px;
      display: inline-block;
      text-align: left;
      letter-spacing: 0px;
      color: #7B7B7B;
      opacity: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2; 
     -webkit-box-orient: vertical;
    }

我正在使用上面的 css，但这只是附加了 '...'。但我想要“……更多”。

Answer 1

无法以这种方式更改text-overflow。你可以做的是添加一个伪元素，它显示你想要的文本并给它一个白色背景。这不是您正在寻找的完美解决方案，但它非常接近：

#limitedText {
  padding: 3px 0px 0px 29px;
  display: inline-block;
  text-align: left;
  letter-spacing: 0px;
  color: #7B7B7B;
  opacity: 1;
  overflow: hidden;
  display: -webkit-box;
  position: relative;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#limitedText:after {
  display: block;
  content: "...more";
  position: absolute;
  bottom: 0;
  right: 0;
  background-image: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255)40%);
  padding-left: 15px;
}

<p id="limitedText">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>