Question

我正在尝试在anchor标签之前添加三个点。类似于下面的图片。A标签应始终位于三个点之后。

我试图在a标签中加入p标签，但这没有帮助。Anchor消失了

p {
    font-family: "Mongolian Baiti";
    font-size: 24px;
    color: #1b1919;
    line-height: 1.25;
    width: 80%;
    display: block;
    display: -webkit-box;
    height: 109.2px;
    font-size: 26px;
    line-height: 1.4;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
a {
    color: #0625fc;
}

<article>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna…Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna…Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna…Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna…Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna…Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna…
  <a href="javascript:void(0);">Read More</a> </p>
</article>

另外，当a中p标记之后的parent block标记没有帮助时。

 p {
  font-family: "Mongolian Baiti";
  font-size: 24px;
  color: #1b1919;
  line-height: 1.25;
  width: 80%;
  display: block;
  display: -webkit-box;
  height: 109.2px;
  font-size: 26px;
  line-height: 1.4;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
 a {
  color: #0625fc;
}

<article>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna…Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna…Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna…Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna…Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna…Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna…
    </p><a href="javascript:void(0);">Read More</a>
</article>

下降投票者，请先发表评论

Answer 1

这里是另一种方法，要求内容始终为3行或更多行：

article {
  /* for demo only */
  max-width: 30em;
}

p {
  position: relative;
  /* max-height is 3 x line-height i.e. 3 lines max */
  line-height: 1.2em;
  max-height: 3.6em;
  overflow: hidden;
  background-color: rgba(220, 220, 220, 1);
}

p > a {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10em;
  background-color: rgba(220, 220, 220, 1);
}

p::after {
  content: "\2026";
  position: absolute;
  bottom: 0;
  right: 10em;
  padding: 0 .25em 0 1em;
  /* display a gradient behind right padding */
  background-image: linear-gradient(to right, rgba(220, 220, 220, 0), rgba(220, 220, 220, 1) 1em);
}

<article>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non vehicula augue. Suspendisse tristique dictum urna vel maximus. Nulla fringilla augue non arcu pulvinar semper. In non eleifend libero. Cras finibus blandit aliquet. Nunc cursus gravida.
    <a href="#">Read more</a>
  </p>
</article>

Answer 2

<html>
  <head>
   <!-- CSS -->
  </head>
  <body>
    <article>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. per volutpat.... <a href="javascript:void(0);">Read More</a>
      </p>
    </article>
  </body>
</html>

标记为p的较小数据显示您的要求。请尝试那样。 CSS中无法进行任何更改。谢谢

Answer 3

您可以为此使用CSS。

HTML

<article>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna…Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna…Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna…Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna…Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna…Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna…
    </p><a href="javascript:void(0);">Read More</a>
</article>

css

article > p {
  display: inline-block; 
  display: -webkit-box;
  max-width: 100%; 
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

demo

在省略号后的段落中添加锚标记

3 个答案: