Add anchor tag inside a paragraph after ellipsis

Question

I'm trying to add three dot's before the anchor tag.Something like in image below.A tag should be always after the three dot's.

I tried to include a tag in the p tag this didn't help.Anchor is disappeared

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>

Also when a tag after p tag in parent block this didn't help.

 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>

Downvoter's please comment first

why is the `` tag using a js function for a href? also you can just do `...read` — treyBake, Jul 12 '18 at 08:20
@ThisGuyHasTwoThumbs https://www.w3schools.com/jsref/jsref_operators.asp look at here for the answer about js function. — Randall, Jul 12 '18 at 08:22
avoid w3schools at all costs, it's full of bad practice and faulty code .. — treyBake, Jul 12 '18 at 08:23
@ThisGuyHasTwoThumbs __avoid w3schools at all costs, it's full of bad practice and faulty code__ No doub't your'e better coder than guy's wroted w3school's.That's why sitting in here and giving the people like me (who want to learn something) downvotes — Randall, Jul 12 '18 at 08:29
@Spectr here's proof if you choose to refute my statement: http://www.w3fools.com/ - honestly, quick w3schools while you can and you'll be a better coder for it — treyBake, Jul 12 '18 at 08:30
@ThisGuyHasTwoThumbs they actually changed their minds few years ago/ — Salman A, Jul 12 '18 at 08:31
@SalmanA only partially :) it says `addressed the majority` - I'd still much rather learn from MDN / the languages official site - I mean take for instance, the PHP page. It says PHP 5 - whilst it's ok to not reference PHP7 they don't specify what version of PHP 5, this could lead to use of code that works in one subversion but not the other — treyBake, Jul 12 '18 at 08:34
Is it guaranteed that the text will always be longer than 3 lines? If so you can try an alternate method of ellipsis. — Salman A, Jul 12 '18 at 08:34
@ThisGuyHasTwoThumbs ok hater of w3school's here the MDN link https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/void — Randall, Jul 12 '18 at 08:35

Salman A · Accepted Answer · 2018-07-12T09:15:41.680

Here is an alternate method that requires that the content is always 3 or more lines:

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>

score 0 · Answer 2 · answered Jul 12 '18 at 08:34

0

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

Lesser p tagged datas shows your requirement. Please try that way.. No change can be done in CSS. Thanks

answered Jul 12 '18 at 08:34

RA'sal

135
1
8

what about `:before`? – treyBake Jul 12 '18 at 08:36

score 0 · Answer 3 · answered Jul 12 '18 at 08:36

You can use CSS for this.

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

ty for answer but read more always should be after three dot's not from the new line — Randall, Jul 12 '18 at 08:36

Add anchor tag inside a paragraph after ellipsis

3 Answers3