0

No this does not work: on Chrome as well- so dont know which browser does this support.

I'm using the https://css-tricks.com/line-clampin/ technique to get certain lines to be displayed in my div container. this is the code I have:

CSS:

.container {
  width: 600px;
  border: 1px solid #888;
  padding: 0.5em;
  line-height: 1.2em;
  margin-bottom: 10px;
}

.summary{

   background-color: #fff;
       height: 60px;
        padding: 2em;
        width: 200px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    
}

https://jsfiddle.net/ozx9np34/

I understand clamp is used to get the 3 dots at the end of truncated lines, but is there a way to add some text("continue"/"more") to it to indicate that more content is present?

user1234
  • 3,000
  • 4
  • 50
  • 102
  • read the duplicate fully, I said it will work in the *futur* and I gave another solution at the bottom – Temani Afif Jan 07 '21 at 00:40
  • so I tried running the code: the content/text appears all the time even when the text is smaller- I want to show the text based on the content- if the content is longer, I dont want to show the more text- please correct if i missed something. thx – user1234 Jan 07 '21 at 00:42
  • @TemaniAfif: as I mentioned the hacky solution does not work in my case as my string is not a simple one, its an HTML and hence I tested this here and does not work: https://jsfiddle.net/ozx9np34/1/ any ideas would be helpful – user1234 Jan 07 '21 at 08:34
  • you will need JS for this. I have added more duplicates – Temani Afif Jan 07 '21 at 08:35
  • @user1234 I updated my answer on your previous post, does it meet your requirements? – koder613 Jan 07 '21 at 08:38
  • @koder613: with your answer I was able to get this far: https://jsfiddle.net/0de2p3zn/ but not completely there yet. since my string contains HTML just innerText is not helping. but I got this working. however I still need to fix the "Read more" part. thx all for you help – user1234 Jan 07 '21 at 08:46

0 Answers0