Kevin Powell - Community•3mo ago

Read more content to popup

i have this description what i want is if the content is going beyond line 3 it should have this more... and when we click it should open the whole content into a popup what i did is, as i am using tailwind. i restraint the content to 3 line with line-clamp-3 but i can't add more after it. so i added a span with More.. and added onClick to open a popup but now the problem is even when the content is not of 3lines it still shows more the solution i found on internet says i need to calculate the line-height to determine if the content is of 3 lines but still the problem is if the content is of 3lines but it is not touching the last point suppose there's only 3 words on last line it'll look like this some content. more... whats the better way of doing this?

30 Replies

glutonium•3mo ago

https://stackoverflow.com/questions/22493727/creating-a-read-more-link-that-extends-the-content-on-the-page

Stack Overflow

Creating a "read more" link that extends the content on the page

I would like to create a read more link that would extend a paragraph already being shown to reveal the entire text on the same page. If this could be solves with HTML5 and CSS, I would like that, ...

glutonium•3mo ago

what about this ok nvm u have to constrain it to 3 lines perhaps u can still follow the same solution but dynamically add lines to the p tags based on the line numbers for that u need to figure out how to calculate line numbers that can be done using (element.textContent.split("\n")).length i think ok nah that wont work lol m just dumb

Israr•3mo ago

we can calculate the number of line by dividing the lineheight to the total height of the tag but what if the content doesnt touch the ending? it look this one

glutonium•3mo ago

function calculateLineNumber(element){
  const computedStyle = window.getComputedStyle(element);
  const lineHeight = parseFloat(computedStyle.getPropertyValue("line-height"));
  const lineNumber = p.offsetHeight / lineHeight;
  return lineNumber;
}

function calculateLineNumber(element){
  const computedStyle = window.getComputedStyle(element);
  const lineHeight = parseFloat(computedStyle.getPropertyValue("line-height"));
  const lineNumber = p.offsetHeight / lineHeight;
  return lineNumber;
}

i made this function that can calculate the line number

Israr•3mo ago

glutonium•3mo ago

the issue here is i had to set the line height otherwise the default is "normal" ig u can just set it in css or hardcore the value in js to whatever the normal value is well about that, my idea is we can just append thsi bit or text (more...) at the end of the description

Israr•3mo ago

with span

glutonium•3mo ago

ya which will have an onclick

Israr•3mo ago

with my current setup i am using lineclamp so it hides🥲

glutonium•3mo ago

lol imma see if i can make one using this method

Israr•3mo ago

yes pleaseeeeeee that means alot

glutonium•3mo ago

for now i have managed to do this

<div class="wrapper">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor feugiat ipsum quis ullamcorper. Nullam vitae velit vitae tortor semper tempor ac vitae magna. Maecenas a ullamcorper neque. Aliquam vitae tortor luctus nisi rutrum eleifend non non leo. Sed eleifend lectus id semper accumsan. Sed lobortis id ligula eget blandit. Integer interdum iaculis nunc, sed porttitor magna tincidunt in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam lobortis accumsan tempor. Aliquam sollicitudin pulvinar est, quis convallis tellus.</p>
  <div class="height-tracker"></div>
</div>
<span data-action="more">Read more</span>

<div class="wrapper">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor feugiat ipsum quis ullamcorper. Nullam vitae velit vitae tortor semper tempor ac vitae magna. Maecenas a ullamcorper neque. Aliquam vitae tortor luctus nisi rutrum eleifend non non leo. Sed eleifend lectus id semper accumsan. Sed lobortis id ligula eget blandit. Integer interdum iaculis nunc, sed porttitor magna tincidunt in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam lobortis accumsan tempor. Aliquam sollicitudin pulvinar est, quis convallis tellus.</p>
  <div class="height-tracker"></div>
</div>
<span data-action="more">Read more</span>

p{
  line-height: 20px;
  overflow: hidden;
  border: solid 1px;
}

.wrapper{
  position: relative;
}

.height-tracker{
  position: absolute;
  top: 0;
  visibility: hidden;
}

span{
  cursor: pointer;
}

p{
  line-height: 20px;
  overflow: hidden;
  border: solid 1px;
}

.wrapper{
  position: relative;
}

.height-tracker{
  position: absolute;
  top: 0;
  visibility: hidden;
}

span{
  cursor: pointer;
}

const span = document.querySelector("span");
const p = document.querySelector("p");
const heightTracker = document.querySelector(".height-tracker");
heightTracker.textContent = p.textContent;


function setHeight(element){
  const lines = getLineProperty(element);
  
  if(lines.lineNumber > 3){
    const elementHeight = lines.lineHeight * 3;
    p.style.height = elementHeight + "px";
  }  
}
setHeight(p);

function getLineProperty(element){
  const computedStyle = window.getComputedStyle(element);
  const lineHeight = parseFloat(computedStyle.getPropertyValue("line-height"));
  const lineNumber = p.offsetHeight / lineHeight;
  return {
    lineNumber, lineHeight
  }
}

span.onclick = () => {
  const action = span.getAttribute("data-action");
  if(action === "more"){
    span.setAttribute("data-action", "less");
    span.textContent = "Read less";
    p.style.height = heightTracker.offsetHeight + "px";
  }
  else if(action === "less"){
    span.setAttribute("data-action", "more");
    span.textContent = "Read more";
    setHeight(p);
  }
}

window.onresize = () => {
  if(span.getAttribute("data-action") === "more")
    setHeight(p);
  else
    p.style.height = "auto";
}

const span = document.querySelector("span");
const p = document.querySelector("p");
const heightTracker = document.querySelector(".height-tracker");
heightTracker.textContent = p.textContent;


function setHeight(element){
  const lines = getLineProperty(element);
  
  if(lines.lineNumber > 3){
    const elementHeight = lines.lineHeight * 3;
    p.style.height = elementHeight + "px";
  }  
}
setHeight(p);

function getLineProperty(element){
  const computedStyle = window.getComputedStyle(element);
  const lineHeight = parseFloat(computedStyle.getPropertyValue("line-height"));
  const lineNumber = p.offsetHeight / lineHeight;
  return {
    lineNumber, lineHeight
  }
}

span.onclick = () => {
  const action = span.getAttribute("data-action");
  if(action === "more"){
    span.setAttribute("data-action", "less");
    span.textContent = "Read less";
    p.style.height = heightTracker.offsetHeight + "px";
  }
  else if(action === "less"){
    span.setAttribute("data-action", "more");
    span.textContent = "Read more";
    setHeight(p);
  }
}

window.onresize = () => {
  if(span.getAttribute("data-action") === "more")
    setHeight(p);
  else
    p.style.height = "auto";
}

@Israr the only flow is the read more or less is separate than the p description i added resize event to make it be 3 lines always the original height being an issue in this case

Israr•3mo ago

this isnt working for me? maybe doing something wrong 😅 i set width to p so it overflow the text

Israr•3mo ago

also i needed the text to appear in a popup as i mentioned above 🥲

glutonium•3mo ago

i updated the code i sent above to fix this

glutonium•3mo ago

it works for me xD check da vid

<div class="wrapper">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor feugiat ipsum quis ullamcorper. Nullam vitae velit vitae tortor semper tempor ac vitae magna. Maecenas a ullamcorper neque. Aliquam vitae tortor luctus nisi rutrum eleifend non non leo. Sed eleifend lectus id semper accumsan. Sed lobortis id ligula eget blandit. Integer interdum iaculis nunc, sed porttitor magna tincidunt in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam lobortis accumsan tempor. Aliquam sollicitudin pulvinar est, quis convallis tellus.
    <span data-action="more"><b>more...</b></span>
  </p>
  
  <div class="height-tracker"></div>
</div>

<div class="wrapper">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor feugiat ipsum quis ullamcorper. Nullam vitae velit vitae tortor semper tempor ac vitae magna. Maecenas a ullamcorper neque. Aliquam vitae tortor luctus nisi rutrum eleifend non non leo. Sed eleifend lectus id semper accumsan. Sed lobortis id ligula eget blandit. Integer interdum iaculis nunc, sed porttitor magna tincidunt in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam lobortis accumsan tempor. Aliquam sollicitudin pulvinar est, quis convallis tellus.
    <span data-action="more"><b>more...</b></span>
  </p>
  
  <div class="height-tracker"></div>
</div>

.wrapper{
  position: relative;
}

p{
  line-height: 20px;
  overflow: hidden;
  border: solid 1px;
  position: related;
}

span{
  position: absolute;
  cursor: pointer;
  right: 5px;
  bottom: 1px;
  background: white;
  padding-left: 0.5rem;
}

.height-tracker{
  position: absolute;
  top: 0;
  visibility: hidden;
}

.wrapper{
  position: relative;
}

p{
  line-height: 20px;
  overflow: hidden;
  border: solid 1px;
  position: related;
}

span{
  position: absolute;
  cursor: pointer;
  right: 5px;
  bottom: 1px;
  background: white;
  padding-left: 0.5rem;
}

.height-tracker{
  position: absolute;
  top: 0;
  visibility: hidden;
}

const span = document.querySelector("span");
const p = document.querySelector("p");
const heightTracker = document.querySelector(".height-tracker");
heightTracker.textContent = p.textContent;


function setHeight(element){
  const lines = getLineProperty(element);
  
  if(lines.lineNumber > 3){
    const elementHeight = lines.lineHeight * 3;
    p.style.height = elementHeight + "px";
  }  
}
setHeight(p);

function getLineProperty(element){
  const computedStyle = window.getComputedStyle(element);
  const lineHeight = parseFloat(computedStyle.getPropertyValue("line-height"));
  const lineNumber = p.offsetHeight / lineHeight;
  return {
    lineNumber, lineHeight
  }
}

span.onclick = () => {
  const action = span.getAttribute("data-action");
  if(action === "more"){
    span.setAttribute("data-action", "less");
    span.style.position = "static";
    span.querySelector("b").textContent = "less...";
    p.style.height = heightTracker.offsetHeight + "px";
  }
  else if(action === "less"){
    span.setAttribute("data-action", "more");
    span.style.position = "absolute";
    span.querySelector("b").textContent = "more...";
    setHeight(p);
  }
}

window.onresize = () => {
  if(span.getAttribute("data-action") === "more")
    setHeight(p);
  else
    p.style.height = "auto";
}

const span = document.querySelector("span");
const p = document.querySelector("p");
const heightTracker = document.querySelector(".height-tracker");
heightTracker.textContent = p.textContent;


function setHeight(element){
  const lines = getLineProperty(element);
  
  if(lines.lineNumber > 3){
    const elementHeight = lines.lineHeight * 3;
    p.style.height = elementHeight + "px";
  }  
}
setHeight(p);

function getLineProperty(element){
  const computedStyle = window.getComputedStyle(element);
  const lineHeight = parseFloat(computedStyle.getPropertyValue("line-height"));
  const lineNumber = p.offsetHeight / lineHeight;
  return {
    lineNumber, lineHeight
  }
}

span.onclick = () => {
  const action = span.getAttribute("data-action");
  if(action === "more"){
    span.setAttribute("data-action", "less");
    span.style.position = "static";
    span.querySelector("b").textContent = "less...";
    p.style.height = heightTracker.offsetHeight + "px";
  }
  else if(action === "less"){
    span.setAttribute("data-action", "more");
    span.style.position = "absolute";
    span.querySelector("b").textContent = "more...";
    setHeight(p);
  }
}

window.onresize = () => {
  if(span.getAttribute("data-action") === "more")
    setHeight(p);
  else
    p.style.height = "auto";
}

@Israr ya i think this works fine

glutonium•3mo ago

Israr•3mo ago

what if we have just 3lines like this? 👀

glutonium•3mo ago

check if the line number is less than 3 or equal if it is 3 or equal then set the display of the span to none else to inline

Israr•3mo ago

righttt okaiee yaa i can do it nowww thank you soo muchhhhhhhh

glutonium•3mo ago

great welcome

Israr•3mo ago

https://tenor.com/view/thank-you-gif-16315556475514269438

Tenor

Israr•3mo ago

another qucik question

Israr•3mo ago

do you know any package for react in which i can make this dragable kind of section which sticks at the bottom of the screen and when you click or drag the section it opens as drawer? or atleast what do we call this thing so i can look for it