I would like a read more button to appear when text overflows and to not show if the text doesn't overflow

So far I have the following code to line clamp if it overflows to line 18:

display: -webkit-box;
-webkit-line-clamp: 18;
-webkit-box-orient: vertical;  
overflow: hidden;

I've had a thorough search and can only find solutions that toggle show more, show less when a div exceeds a certain length.

However, I would only like the button to show if it exceeds the length: <a href="article.html">Read more</a>

I would like a read more button to appear when text overflows and to not show if the text doesn't overflow

So far I have the following code to line clamp if it overflows to line 18:

display: -webkit-box;
-webkit-line-clamp: 18;
-webkit-box-orient: vertical;  
overflow: hidden;

I've had a thorough search and can only find solutions that toggle show more, show less when a div exceeds a certain length.

However, I would only like the button to show if it exceeds the length: <a href="article.html">Read more</a>

• javascript
• html

3 Answers 3

You could use javascript to achieve this by checking if the element has an overflow and toggle the button based on whether or not the element has an overflow.

function showReadMoreButton(element){
   if (element.offsetHeight < element.scrollHeight ||
        element.offsetWidth < element.scrollWidth) {
        // your element has an overflow
        // show read more button
    } else {
        // your element doesn't have overflow
    }
}

Example call:
var elementToCheck = document.getElementById('someElementToCheck');
showReadMoreButton(elementToCheck);


// call showReadMoreButton() after page load and/or window resize and/or functions which change content within the overflow element.

Note that you would need to call this function from the appropriate sections that could change content within the overflow element.

Reference for overflow check from: Check with jquery if div has overflowing elements

To solve this i used the following javascript:

var element = document.querySelector('.pcontent');
if( (element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth)){
   // your element have overflow
  document.querySelector('#read-more').style.visibility = "visible";
}
else{
  //your element don't have overflow

With these elements:

<p class="pcontent">Text here</p>
<a id="read-more" href="readmore.html">Read more</a>

And this css:

.pcontent {
    display: -webkit-box;
    -webkit-line-clamp: 18;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}
#read-more {
    visibility: hidden;
}

I had the same question but then asked myself, why do I need a "show more" button when users already see a "..." after clamping?

I ended up doing the following using hyperscript

<p class="line-clamp-4" _="on click toggle .line-clamp-4">
my very long or very short text
</p>

when I have in my css file

.line-clamp-4 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* truncate to 4 lines */
    -webkit-line-clamp: 4;
}

With this technique, the text will display an ending ellipsis only when it exceeds 4 lines, and clicking on the paragraph will toggle the display of the entire text. When the text occupies less than 4 lines, toggling the class has no effect.

It is possible to use more complex JS code to for example change cursor shape only when clamping happens, but I am satisfied with this simple solution.