Question 255289 in Html Question posted in
Some basic documentation can be found here.

Html – 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!

Tags:

2

Answers


  1. 0

    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;
  visibility: visible;
}
    <div class="wrapp">
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>
    Login or Signup to reply.
  2. 0

    CSS grid can solve this:

    .box {
  display: grid;
  height: 1lh; /* height of one line */
  overflow: hidden;
  place-content: end;
  font-size: 28px;
}
/* fallback if lh is not supported */
@supports not (height:1lh) {
  .box {
    line-height: 1.5em;
    height: 1.5em;
  }
}

p {
 margin: 0;
} 
    <div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis arcu mattis, eleifend arcu in, pharetra dui. Ut maximus elit sapien, vel interdum eros consectetur eu. Maecenas non fermentum massa. Aenean ut mauris libero. Integer consequat at est non condimentum. Nunc ac convallis sem. Proin aliquet malesuada elit et imperdiet. Phasellus ornare vel nulla a euismod. Integer nec purus porta leo faucibus vehicula.</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search