JSFiddle - React, Tailwind, and code Playground
HTML
<p class="maybe_more">A lot of text...am I overflowing?<br/>Could be!<br/>By now!<br/>Surely<br/>Must be<br/>Definitely I'd think<br/>Yes I am!</p>
<input class="show_more" type="submit" value="MORE">
<p class="maybe_more">A lot of text?<br/>Not this time.</p>
<input class="show_more" type="submit" value="MORE">
CSS
.maybe_more {
height: 100px;
overflow: hidden;
}
.show_more {
display: none;
}
JavaScript
$(document).ready(function() {
$(".maybe_more").each(function(){
if ($(this)[0].scrollHeight > $(this)[0].clientHeight) {
$(this).next(".show_more").toggle(true);
}
});
});