I'm looking to just view the end of a potentially large piece of text where everything above the last line is cut off. This text is just one long string so splitting it on \n
or something won't work.
Ideally I would use something like -webkit-line-clamp
but, from what I can tell that only truncates text. I realise a lot of people will say that this is a JS issue rather than CSS but I'm trying to make this reactive and I think most JS solutions will look janky when resizing the page, however I'm very willing to be shown that I'm wrong on that!
If you want to display only the last line, then apply position: absolute;
to the text. But you need to know the line-height
so that the height
of the block is not 0
. For this you can add one character and hide it. Something like this:
.wrapp {
width: 200px;
overflow: hidden;
position: relative;
line-height: 1.4;
}
.wrapp:after {
content: 'πΊπ¦';
display: block;
visibility: hidden;
}
.text{
position: absolute;
inset: auto 0 0 0;
}
<div class="wrapp">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>