[SOLVED] Viewing only the last line of text with CSS

Viewing only the last line of text with CSS

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!

Solution

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>