How to add a link after ellipsis using -webkit-box? - html

Question

This is the layout I want to achieve:
This is what I tried so far. The text kinda overlaps each other.
* {
box-sizing: border-box;
}
body {
background-color: #F9F9F9;
}
p {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
width: 300px;
position: relative;
hyphens: auto;
background-color: white;
}
a {
display: block;
position: absolute;
bottom: 0;
right: 0;
}
<p>
<span>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam, possimus expedita deleniti eum repudiandae rerum distinctio asperiores sit sint, nulla natus! Molestias ipsa quos reiciendis repudiandae blanditiis adipisci aperiam neque, tenetur saepe? Quidem quas modi mollitia consequatur velit earum praesentium non laudantium, vitae accusantium labore aut dolorum odio, veniam iste eum ad quisquam incidunt in expedita libero molestias impedit dignissimos? Debitis, repudiandae? Aperiam vero id, nihil tempora aliquam incidunt, nam ipsum unde odit quos, excepturi modi laudantium itaque alias illo impedit iusto ad officia nobis magni. Perferendis, velit quidem impedit rem asperiores, sint odit facilis mollitia similique nostrum, adipisci excepturi.
</span>
Show More
</p>
How can I achieve this kind of layout?

Answer 1

I don't think this is doable with line clamp so here is another idea to get the same effect without line-clamp. It's a bit hacky but is more supported:
You can also click the show more button:
* {
box-sizing: border-box;
}
body {
background-color: #F9F9F9;
}
p {
overflow: hidden;
width: 300px;
line-height: 1.2em;
height: calc(3 * 1.2em); /* define 3 lines*/
position: relative;
background-color: white;
}
a {
position: absolute;
bottom: 0;
right: 0;
background: inherit;
outline: none;
padding-left: 18px;
}
a:before {
content: "...";
position: absolute;
left: 0;
text-decoration: none;
color: #000;
}
p:focus-within {
height: auto;
}
p:focus-within a {
font-size:0;
}
<p>
<span>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam, possimus expedita deleniti eum repudiandae rerum distinctio asperiores sit sint, nulla natus! Molestias ipsa quos reiciendis repudiandae blanditiis adipisci aperiam neque, tenetur saepe? Quidem quas modi mollitia consequatur velit earum praesentium non laudantium, vitae accusantium labore aut dolorum odio, veniam iste eum ad quisquam incidunt in expedita libero molestias impedit dignissimos? Debitis, repudiandae? Aperiam vero id, nihil tempora aliquam incidunt, nam ipsum unde odit quos, excepturi modi laudantium itaque alias illo impedit iusto ad officia nobis magni. Perferendis, velit quidem impedit rem asperiores, sint odit facilis mollitia similique nostrum, adipisci excepturi.
</span>
Show More
</p>