PROWAREtech
JavaScript: Auto-hide Text Sections That Are Too Long
Use HTML, CSS and JavaScript to better format a page by hiding large sections of text with a fade to a "read more" link that the user can choose to expand the text with. This is often used on user submitted comments.
Note the comments in the code helping to explain what can be modified.
See also: hide entire sections of a page using only HTML and CSS.
This code is compatible with all browsers including Internet Explorer 11 (IE11).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hidden Text Example Using JavaScript, HTML and CSS</title>
<style>
.example {
margin: 0 auto;
background-color: white; /* NOTE: can use any color of choice */
padding: 10%;
font-size: 16px; /* NOTE: can change this, but may need to increase the .partial-hidden-text-parent height */
max-width: 768px; /* NOTE: can remove this */
}
.partial-hidden-text-parent {
position: relative;
height: 75px; /* NOTE: can adjust this */
overflow: hidden;
transition: height 1s;
background-color: inherit;
}
.read-more {
position: absolute;
bottom: 0;
width: 100%;
background-color: inherit;
}
.read-more-fade {
position: absolute;
height: 50px; /* NOTE: adjust this to .partial-hidden-text-parent height; careful not to exceed it */
top: -50px; /* NOTE: can adjust this to match the above height parameter */
width: 100%;
background-image: linear-gradient(transparent,white); /* NOTE: can use any color of choice */
}
</style>
<script type="text/javascript">
window.setHiddenText = function (link, event) { // NOTE: remove the read more link and show the hidden text if the user clicked on the read more link
var readMore = link.parentElement;
var partialHiddenTextParent = readMore.parentElement;
var partialHiddenText = partialHiddenTextParent.getElementsByClassName("partial-hidden-text")[0];
if(event && partialHiddenText.offsetHeight + readMore.offsetHeight > partialHiddenTextParent.offsetHeight) {
partialHiddenTextParent.style.height = partialHiddenText.offsetHeight + readMore.offsetHeight + "px";
readMore.parentNode.removeChild(readMore);
}
else if(!event && partialHiddenText.offsetHeight + readMore.offsetHeight <= partialHiddenTextParent.offsetHeight) {
readMore.parentNode.removeChild(readMore);
}
return false;
}
var load = function() {
var phtp = document.getElementsByClassName("partial-hidden-text-parent");
for(var i = 0; i < phtp.length; i++) {
var links = phtp[i].getElementsByClassName("read-more-link");
for(var j = 0; j < links.length; j++) {
setHiddenText(links[j]);
}
}
};
window.addEventListener("load", load, false);
</script>
</head>
<body>
<div class="example">
<div class="partial-hidden-text-parent">
<p class="partial-hidden-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore repellendus doloremque, nam laborum rem, quos quisquam illo earum unde at ab voluptatum? Ducimus aspernatur quasi vitae modi, amet aliquid itaque. Ex totam deleniti ratione sapiente iure similique exercitationem nam reiciendis quisquam at voluptatum, recusandae, optio, voluptatem harum blanditiis. Ipsa, illo voluptas eveniet nisi ipsam nihil ea explicabo sit quia, ab iusto. Enim eius doloribus ipsa vel eum hic nisi necessitatibus atque commodi, ratione, magni, accusantium saepe exercitationem eligendi ex vero alias cum eos sit ipsam. Facere commodi perferendis ullam recusandae veritatis, non neque veniam culpa? Doloribus harum assumenda cumque, delectus ut perferendis voluptatibus, non nesciunt repellendus minima quos fuga, quo eveniet deleniti maxime nam ipsam voluptatem! Blanditiis sed, exercitationem eligendi impedit modi repellendus placeat esse ducimus delectus voluptates molestias iusto voluptatem eos magni est sint. Alias, nostrum. Nesciunt ab quos itaque laudantium cumque error dolor aperiam consectetur quaerat vitae laborum, distinctio mollitia nulla sunt, necessitatibus minima dolorem! Nisi repudiandae fugiat nesciunt quaerat incidunt modi illum accusamus? Sint alias sequi cum odit! Quibusdam, nihil sed minus maiores eum vitae, mollitia consectetur minima non provident sunt sequi fugiat facilis ullam autem magni quidem veniam. Voluptates vitae eveniet veritatis, quod itaque non eum soluta accusamus fugit ducimus explicabo deleniti beatae, possimus debitis saepe. Repellendus atque tempora iste modi dolorem impedit nesciunt harum veritatis fuga. Distinctio quasi eligendi corrupti rem ipsum aliquam voluptate necessitatibus, sequi perspiciatis molestiae excepturi nam unde omnis modi, non veniam eaque! Aut, sequi. Repellat iure in, voluptates aliquam distinctio tenetur?</p>
<div class="read-more">
<div class="read-more-fade"></div>
<a class="read-more-link" onclick="return setHiddenText(this, event);" href="javascript:;">Read More</a>
</div>
</div>
<div class="partial-hidden-text-parent">
<p class="partial-hidden-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, dolore voluptates! Harum non voluptatibus repellat vel, assumenda quibusdam at illum minima numquam autem recusandae rem. Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat impedit qui odit numquam neque, praesentium ipsam ipsum aut molestiae vel, quo.</p>
<div class="read-more">
<div class="read-more-fade"></div>
<a class="read-more-link" onclick="return setHiddenText(this, event);" href="javascript:;">Read More</a>
</div>
</div>
<div class="partial-hidden-text-parent">
<p class="partial-hidden-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas est ducimus quia corrupti quisquam culpa dolor. Qui odit adipisci corporis ea voluptatibus cupiditate eveniet, dolores mollitia quis architecto nostrum illo veniam commodi! Non, maiores rerum. Voluptatem, officiis autem porro doloribus, dolorem ut ipsa similique nihil in assumenda saepe aspernatur minus! Incidunt eos optio praesentium enim! Architecto quibusdam molestiae, numquam iure autem reprehenderit tempore! Velit reiciendis, omnis sequi praesentium officia veniam quam repellendus est unde vitae, aperiam cumque in. Cupiditate quae, voluptatibus et eaque quam non cumque accusamus, quis quia, perferendis reiciendis neque magnam consequatur optio expedita deleniti at distinctio a.</p>
<div class="read-more">
<div class="read-more-fade"></div>
<a class="read-more-link" onclick="return setHiddenText(this, event);" href="javascript:;">Read More</a>
</div>
</div>
<div class="partial-hidden-text-parent">
<p class="partial-hidden-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia perspiciatis quidem dignissimos labore, aut suscipit ullam vel libero sequi expedita neque eligendi quibusdam consequatur minima explicabo modi. Iusto amet eligendi dolor quam fugit saepe, modi voluptas, doloremque beatae necessitatibus perspiciatis. Facilis aspernatur repudiandae corporis repellat quae ipsa a iure quis! Officia rem, unde laboriosam explicabo vero animi alias nemo voluptas, odio nostrum deserunt iusto pariatur. Impedit modi sapiente ipsum, harum labore cum quis vitae, aliquam, architecto ex commodi! Neque tenetur excepturi ab alias dignissimos nam similique, delectus debitis doloremque id reprehenderit praesentium odio quibusdam! Molestiae quod in eius dignissimos vitae culpa, sequi aperiam explicabo, voluptates fuga laudantium distinctio repellat odit animi pariatur vero aut eaque ratione, nisi consequatur. Illum autem molestias aliquid qui doloribus eum rem nesciunt eius alias officiis earum facilis temporibus saepe ipsam mollitia, vitae voluptate, voluptatum sed possimus iure nihil tenetur? Nulla nemo repellendus dicta consequuntur totam hic! Soluta non assumenda laborum aspernatur harum minima quis nostrum, dignissimos recusandae deleniti molestias neque accusantium commodi repudiandae, optio quaerat voluptas, quasi aperiam consequuntur? Incidunt a, molestiae vel id accusantium error! Dolorem, exercitationem consequatur? Corrupti nostrum architecto fugiat modi vel ea magnam consectetur ullam aut obcaecati? Velit, modi harum sed, quod repudiandae quam aliquam saepe nostrum ipsam tenetur cumque. Debitis nam hic unde in iste quibusdam velit vitae itaque incidunt quisquam? Repellendus ex reiciendis natus alias ratione accusamus, incidunt voluptatibus nam dolore iste nostrum nobis architecto laudantium dolor modi labore quasi, aspernatur obcaecati voluptatum placeat nesciunt nulla similique deleniti! Reiciendis vitae quo animi magnam, rem quam temporibus corrupti officia, quos eligendi nesciunt officiis quasi provident, odit pariatur totam quidem atque voluptas porro alias eveniet voluptates repudiandae! Omnis esse, iusto ut molestiae, excepturi quam ea expedita velit praesentium dolores atque! Accusantium eos porro animi corporis, adipisci odio ratione aut modi, ex excepturi sed molestias quod. Accusamus illo repellendus consequuntur dolorum ducimus qui dicta. Voluptas voluptatibus deleniti, velit laboriosam recusandae suscipit commodi fuga tempora ipsa, eius enim. Quaerat corrupti quod cum sunt velit obcaecati blanditiis temporibus reiciendis dignissimos neque beatae aliquid nemo aliquam voluptatibus iste sed excepturi pariatur id, veniam, quibusdam accusamus minus? Eaque, ex! A suscipit totam aliquid laborum ullam sunt, error possimus. Id dolores veniam numquam natus? Sint quibusdam sapiente quasi, incidunt labore id excepturi laboriosam debitis corporis totam. Hic ullam corporis nemo dolorum, nesciunt sunt doloribus quos voluptatibus laudantium voluptatem? Accusamus quidem eaque molestias sint at reprehenderit eligendi ipsam velit. Labore corrupti voluptatum iste laboriosam modi ex optio commodi ad officiis enim nihil maxime eaque temporibus amet perspiciatis ipsam, hic iusto? Perferendis repellendus facere quam, sapiente aut at molestias voluptas porro, iste pariatur distinctio illum illo, eum voluptatum tenetur tempore unde voluptatem. Aspernatur, exercitationem! Velit quia unde esse rem voluptate, eaque non quaerat corporis ullam optio omnis minus totam animi qui provident? Totam placeat recusandae ipsum optio provident quos corporis distinctio beatae, nam officiis illum, asperiores, ipsa expedita ducimus esse sed rerum. Animi ea, doloremque id possimus quasi vitae aliquid nam veritatis aliquam ut perspiciatis error, blanditiis numquam officiis.</p>
<div class="read-more">
<div class="read-more-fade"></div>
<a class="read-more-link" onclick="return setHiddenText(this, event);" href="javascript:;">Read More</a>
</div>
</div>
</div>
</body>
</html>
This is an alternate version that relies more on JavaScript, but it cleans up the HTML a lot. All that is required is the "partial-hidden-text" class be added to the element to have hidden text.
This code is compatible with all browsers including Internet Explorer 11 (IE11).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hidden Text Example Using JavaScript, HTML and CSS</title>
<style>
body, table {
background-color: white; /* NOTE: can use any color of choice */
}
.center {
margin: 0 auto;
}
.example {
background-color: white; /* NOTE: can use any color of choice */
padding: 4%;
font-size: 16px; /* NOTE: can change this, but may need to increase the .partial-hidden-text-parent height */
max-width: 768px; /* NOTE: can remove this */
vertical-align: top;
}
.partial-hidden-text-parent {
position: relative;
height: 75px; /* NOTE: can adjust this */
overflow: hidden;
transition: height 1s;
background-color: inherit;
padding: 0;
margin: 0;
}
.read-more {
position: absolute;
bottom: 0;
width: 100%;
background-color: inherit;
}
.read-more-fade {
position: absolute;
height: 50px; /* NOTE: adjust this to .partial-hidden-text-parent height; careful not to exceed it */
top: -50px; /* NOTE: can adjust this to match the above height parameter */
width: 100%;
background-image: linear-gradient(transparent,white); /* NOTE: can use any color of choice */
}
</style>
<script type="text/javascript">
var setHiddenText = function (link, event) { // NOTE: remove the read more link and show the hidden text if the user clicked on the read more link
var readMore = link.parentElement;
var partialHiddenTextParent = readMore.parentElement;
var partialHiddenText = partialHiddenTextParent.childNodes[0];
if(event && partialHiddenText && partialHiddenText.offsetHeight + readMore.offsetHeight > partialHiddenTextParent.offsetHeight) {
partialHiddenTextParent.style.height = partialHiddenText.offsetHeight + readMore.offsetHeight + "px";
readMore.parentNode.removeChild(readMore);
}
else if(!event && partialHiddenText && partialHiddenText.offsetHeight + readMore.offsetHeight <= partialHiddenTextParent.offsetHeight) {
readMore.parentNode.removeChild(readMore);
}
return false;
}
var createReadMore = function () {
var readMore = document.createElement("div"), readMoreFade = document.createElement("div"), readMoreLink = document.createElement("a");
readMore.className = "read-more";
readMoreFade.className = "read-more-fade";
readMoreLink.className = "read-more-link";
readMoreLink.onclick = function() { return setHiddenText(this, event); };
readMoreLink.appendChild(document.createTextNode("Read More"));
readMoreLink.href = "javascript:;";
readMore.appendChild(readMoreFade);
readMore.appendChild(readMoreLink);
return readMore;
}
var createPartialHiddenTextParent = function (partialHiddenText) {
var partialHiddenTextParent = document.createElement("div");
partialHiddenTextParent.className = "partial-hidden-text-parent";
var temp = document.createElement(partialHiddenText.tagName);
temp.className = partialHiddenText.className;
temp.innerHTML = partialHiddenText.innerHTML;
partialHiddenTextParent.appendChild(temp);
partialHiddenTextParent.appendChild(createReadMore());
return partialHiddenTextParent;
}
var load = function() {
var newPht = new Array();
var pht = document.getElementsByClassName("partial-hidden-text")
for(var i = 0; i < pht.length; i++) {
newPht.push({
parent: pht[i].parentElement,
newNode: createPartialHiddenTextParent(pht[i]),
oldNode: pht[i]
});
}
for(var i = 0; i < newPht.length; i++) {
newPht[i].parent.replaceChild(newPht[i].newNode, newPht[i].oldNode);
}
var phtp = document.getElementsByClassName("partial-hidden-text-parent");
for(var i = 0; i < phtp.length; i++) {
var links = phtp[i].getElementsByClassName("read-more-link");
for(var j = 0; j < links.length; j++) {
setHiddenText(links[j]);
}
}
};
window.addEventListener("load", load, false);
</script>
</head>
<body>
<table class="center">
<tr>
<td class="example">
<p class="partial-hidden-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore repellendus doloremque, nam laborum rem, quos quisquam illo earum unde at ab voluptatum? Ducimus aspernatur quasi vitae modi, amet aliquid itaque. Ex totam deleniti ratione sapiente iure similique exercitationem nam reiciendis quisquam at voluptatum, recusandae, optio, voluptatem harum blanditiis. Ipsa, illo voluptas eveniet nisi ipsam nihil ea explicabo sit quia, ab iusto. Enim eius doloribus ipsa vel eum hic nisi necessitatibus atque commodi, ratione, magni, accusantium saepe exercitationem eligendi ex vero alias cum eos sit ipsam. Facere commodi perferendis ullam recusandae veritatis, non neque veniam culpa? Doloribus harum assumenda cumque, delectus ut perferendis voluptatibus, non nesciunt repellendus minima quos fuga, quo eveniet deleniti maxime nam ipsam voluptatem! Blanditiis sed, exercitationem eligendi impedit modi repellendus placeat esse ducimus delectus voluptates molestias iusto voluptatem eos magni est sint. Alias, nostrum. Nesciunt ab quos itaque laudantium cumque error dolor aperiam consectetur quaerat vitae laborum, distinctio mollitia nulla sunt, necessitatibus minima dolorem! Nisi repudiandae fugiat nesciunt quaerat incidunt modi illum accusamus? Sint alias sequi cum odit! Quibusdam, nihil sed minus maiores eum vitae, mollitia consectetur minima non provident sunt sequi fugiat facilis ullam autem magni quidem veniam. Voluptates vitae eveniet veritatis, quod itaque non eum soluta accusamus fugit ducimus explicabo deleniti beatae, possimus debitis saepe. Repellendus atque tempora iste modi dolorem impedit nesciunt harum veritatis fuga. Distinctio quasi eligendi corrupti rem ipsum aliquam voluptate necessitatibus, sequi perspiciatis molestiae excepturi nam unde omnis modi, non veniam eaque! Aut, sequi. Repellat iure in, voluptates aliquam distinctio tenetur?</p>
<p class="partial-hidden-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, dolore voluptates! Harum non voluptatibus repellat vel, assumenda quibusdam at illum minima numquam autem recusandae rem.</p>
<p>This is a test!</p>
<p class="partial-hidden-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas est ducimus quia corrupti quisquam culpa dolor. Qui odit adipisci corporis ea voluptatibus cupiditate eveniet, dolores mollitia quis architecto nostrum illo veniam commodi! Non, maiores rerum. Voluptatem, officiis autem porro doloribus, dolorem ut ipsa similique nihil in assumenda saepe aspernatur minus! Incidunt eos optio praesentium enim! Architecto quibusdam molestiae, numquam iure autem reprehenderit tempore! Velit reiciendis, omnis sequi praesentium officia veniam quam repellendus est unde vitae, aperiam cumque in. Cupiditate quae, voluptatibus et eaque quam non cumque accusamus, quis quia, perferendis reiciendis neque magnam consequatur optio expedita deleniti at distinctio a.</p>
<p class="partial-hidden-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia perspiciatis quidem dignissimos labore, aut suscipit ullam vel libero sequi expedita neque eligendi quibusdam consequatur minima explicabo modi. Iusto amet eligendi dolor quam fugit saepe, modi voluptas, doloremque beatae necessitatibus perspiciatis. Facilis aspernatur repudiandae corporis repellat quae ipsa a iure quis! Officia rem, unde laboriosam explicabo vero animi alias nemo voluptas, odio nostrum deserunt iusto pariatur. Impedit modi sapiente ipsum, harum labore cum quis vitae, aliquam, architecto ex commodi! Neque tenetur excepturi ab alias dignissimos nam similique, delectus debitis doloremque id reprehenderit praesentium odio quibusdam! Molestiae quod in eius dignissimos vitae culpa, sequi aperiam explicabo, voluptates fuga laudantium distinctio repellat odit animi pariatur vero aut eaque ratione, nisi consequatur. Illum autem molestias aliquid qui doloribus eum rem nesciunt eius alias officiis earum facilis temporibus saepe ipsam mollitia, vitae voluptate, voluptatum sed possimus iure nihil tenetur? Nulla nemo repellendus dicta consequuntur totam hic! Soluta non assumenda laborum aspernatur harum minima quis nostrum, dignissimos recusandae deleniti molestias neque accusantium commodi repudiandae, optio quaerat voluptas, quasi aperiam consequuntur? Incidunt a, molestiae vel id accusantium error! Dolorem, exercitationem consequatur? Corrupti nostrum architecto fugiat modi vel ea magnam consectetur ullam aut obcaecati? Velit, modi harum sed, quod repudiandae quam aliquam saepe nostrum ipsam tenetur cumque. Debitis nam hic unde in iste quibusdam velit vitae itaque incidunt quisquam? Repellendus ex reiciendis natus alias ratione accusamus, incidunt voluptatibus nam dolore iste nostrum nobis architecto laudantium dolor modi labore quasi, aspernatur obcaecati voluptatum placeat nesciunt nulla similique deleniti! Reiciendis vitae quo animi magnam, rem quam temporibus corrupti officia, quos eligendi nesciunt officiis quasi provident, odit pariatur totam quidem atque voluptas porro alias eveniet voluptates repudiandae! Omnis esse, iusto ut molestiae, excepturi quam ea expedita velit praesentium dolores atque! Accusantium eos porro animi corporis, adipisci odio ratione aut modi, ex excepturi sed molestias quod. Accusamus illo repellendus consequuntur dolorum ducimus qui dicta. Voluptas voluptatibus deleniti, velit laboriosam recusandae suscipit commodi fuga tempora ipsa, eius enim. Quaerat corrupti quod cum sunt velit obcaecati blanditiis temporibus reiciendis dignissimos neque beatae aliquid nemo aliquam voluptatibus iste sed excepturi pariatur id, veniam, quibusdam accusamus minus? Eaque, ex! A suscipit totam aliquid laborum ullam sunt, error possimus. Id dolores veniam numquam natus? Sint quibusdam sapiente quasi, incidunt labore id excepturi laboriosam debitis corporis totam. Hic ullam corporis nemo dolorum, nesciunt sunt doloribus quos voluptatibus laudantium voluptatem? Accusamus quidem eaque molestias sint at reprehenderit eligendi ipsam velit. Labore corrupti voluptatum iste laboriosam modi ex optio commodi ad officiis enim nihil maxime eaque temporibus amet perspiciatis ipsam, hic iusto? Perferendis repellendus facere quam, sapiente aut at molestias voluptas porro, iste pariatur distinctio illum illo, eum voluptatum tenetur tempore unde voluptatem. Aspernatur, exercitationem! Velit quia unde esse rem voluptate, eaque non quaerat corporis ullam optio omnis minus totam animi qui provident? Totam placeat recusandae ipsum optio provident quos corporis distinctio beatae, nam officiis illum, asperiores, ipsa expedita ducimus esse sed rerum. Animi ea, doloremque id possimus quasi vitae aliquid nam veritatis aliquam ut perspiciatis error, blanditiis numquam officiis.</p>
<p>This is a test!</p>
</td>
<td class="example">
<p>This is a test!</p>
<p class="partial-hidden-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia perspiciatis quidem dignissimos labore, aut suscipit ullam vel libero sequi expedita neque eligendi quibusdam consequatur minima explicabo modi. Iusto amet eligendi dolor quam fugit saepe, modi voluptas, doloremque beatae necessitatibus perspiciatis. Facilis aspernatur repudiandae corporis repellat quae ipsa a iure quis! Officia rem, unde laboriosam explicabo vero animi alias nemo voluptas, odio nostrum deserunt iusto pariatur. Impedit modi sapiente ipsum, harum labore cum quis vitae, aliquam, architecto ex commodi! Neque tenetur excepturi ab alias dignissimos nam similique, delectus debitis doloremque id reprehenderit praesentium odio quibusdam! Molestiae quod in eius dignissimos vitae culpa, sequi aperiam explicabo, voluptates fuga laudantium distinctio repellat odit animi pariatur vero aut eaque ratione, nisi consequatur. Illum autem molestias aliquid qui doloribus eum rem nesciunt eius alias officiis earum facilis temporibus saepe ipsam mollitia, vitae voluptate, voluptatum sed possimus iure nihil tenetur? Nulla nemo repellendus dicta consequuntur totam hic! Soluta non assumenda laborum aspernatur harum minima quis nostrum, dignissimos recusandae deleniti molestias neque accusantium commodi repudiandae, optio quaerat voluptas, quasi aperiam consequuntur? Incidunt a, molestiae vel id accusantium error! Dolorem, exercitationem consequatur? Corrupti nostrum architecto fugiat modi vel ea magnam consectetur ullam aut obcaecati? Velit, modi harum sed, quod repudiandae quam aliquam saepe nostrum ipsam tenetur cumque. Debitis nam hic unde in iste quibusdam velit vitae itaque incidunt quisquam? Repellendus ex reiciendis natus alias ratione accusamus, incidunt voluptatibus nam dolore iste nostrum nobis architecto laudantium dolor modi labore quasi, aspernatur obcaecati voluptatum placeat nesciunt nulla similique deleniti! Reiciendis vitae quo animi magnam, rem quam temporibus corrupti officia, quos eligendi nesciunt officiis quasi provident, odit pariatur totam quidem atque voluptas porro alias eveniet voluptates repudiandae! Omnis esse, iusto ut molestiae, excepturi quam ea expedita velit praesentium dolores atque! Accusantium eos porro animi corporis, adipisci odio ratione aut modi, ex excepturi sed molestias quod. Accusamus illo repellendus consequuntur dolorum ducimus qui dicta. Voluptas voluptatibus deleniti, velit laboriosam recusandae suscipit commodi fuga tempora ipsa, eius enim. Quaerat corrupti quod cum sunt velit obcaecati blanditiis temporibus reiciendis dignissimos neque beatae aliquid nemo aliquam voluptatibus iste sed excepturi pariatur id, veniam, quibusdam accusamus minus? Eaque, ex! A suscipit totam aliquid laborum ullam sunt, error possimus. Id dolores veniam numquam natus? Sint quibusdam sapiente quasi, incidunt labore id excepturi laboriosam debitis corporis totam. Hic ullam corporis nemo dolorum, nesciunt sunt doloribus quos voluptatibus laudantium voluptatem? Accusamus quidem eaque molestias sint at reprehenderit eligendi ipsam velit. Labore corrupti voluptatum iste laboriosam modi ex optio commodi ad officiis enim nihil maxime eaque temporibus amet perspiciatis ipsam, hic iusto? Perferendis repellendus facere quam, sapiente aut at molestias voluptas porro, iste pariatur distinctio illum illo, eum voluptatum tenetur tempore unde voluptatem. Aspernatur, exercitationem! Velit quia unde esse rem voluptate, eaque non quaerat corporis ullam optio omnis minus totam animi qui provident? Totam placeat recusandae ipsum optio provident quos corporis distinctio beatae, nam officiis illum, asperiores, ipsa expedita ducimus esse sed rerum. Animi ea, doloremque id possimus quasi vitae aliquid nam veritatis aliquam ut perspiciatis error, blanditiis numquam officiis.</p>
<p class="partial-hidden-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore repellendus doloremque, nam laborum rem, quos quisquam illo earum unde at ab voluptatum? Ducimus aspernatur quasi vitae modi, amet aliquid itaque. Ex totam deleniti ratione sapiente iure similique exercitationem nam reiciendis quisquam at voluptatum, recusandae, optio, voluptatem harum blanditiis. Ipsa, illo voluptas eveniet nisi ipsam nihil ea explicabo sit quia, ab iusto. Enim eius doloribus ipsa vel eum hic nisi necessitatibus atque commodi, ratione, magni, accusantium saepe exercitationem eligendi ex vero alias cum eos sit ipsam. Facere commodi perferendis ullam recusandae veritatis, non neque veniam culpa? Doloribus harum assumenda cumque, delectus ut perferendis voluptatibus, non nesciunt repellendus minima quos fuga, quo eveniet deleniti maxime nam ipsam voluptatem! Blanditiis sed, exercitationem eligendi impedit modi repellendus placeat esse ducimus delectus voluptates molestias iusto voluptatem eos magni est sint. Alias, nostrum. Nesciunt ab quos itaque laudantium cumque error dolor aperiam consectetur quaerat vitae laborum, distinctio mollitia nulla sunt, necessitatibus minima dolorem! Nisi repudiandae fugiat nesciunt quaerat incidunt modi illum accusamus? Sint alias sequi cum odit! Quibusdam, nihil sed minus maiores eum vitae, mollitia consectetur minima non provident sunt sequi fugiat facilis ullam autem magni quidem veniam. Voluptates vitae eveniet veritatis, quod itaque non eum soluta accusamus fugit ducimus explicabo deleniti beatae, possimus debitis saepe. Repellendus atque tempora iste modi dolorem impedit nesciunt harum veritatis fuga. Distinctio quasi eligendi corrupti rem ipsum aliquam voluptate necessitatibus, sequi perspiciatis molestiae excepturi nam unde omnis modi, non veniam eaque! Aut, sequi. Repellat iure in, voluptates aliquam distinctio tenetur?</p>
<p class="partial-hidden-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, dolore voluptates! Harum non voluptatibus repellat vel, assumenda quibusdam at illum minima numquam autem recusandae rem.</p>
<p class="partial-hidden-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas est ducimus quia corrupti quisquam culpa dolor. Qui odit adipisci corporis ea voluptatibus cupiditate eveniet, dolores mollitia quis architecto nostrum illo veniam commodi! Non, maiores rerum. Voluptatem, officiis autem porro doloribus, dolorem ut ipsa similique nihil in assumenda saepe aspernatur minus! Incidunt eos optio praesentium enim! Architecto quibusdam molestiae, numquam iure autem reprehenderit tempore! Velit reiciendis, omnis sequi praesentium officia veniam quam repellendus est unde vitae, aperiam cumque in. Cupiditate quae, voluptatibus et eaque quam non cumque accusamus, quis quia, perferendis reiciendis neque magnam consequatur optio expedita deleniti at distinctio a.</p>
<p>This is a test!</p>
</td>
</tr>
</table>
<p class="partial-hidden-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia perspiciatis quidem dignissimos labore, aut suscipit ullam vel libero sequi expedita neque eligendi quibusdam consequatur minima explicabo modi. Iusto amet eligendi dolor quam fugit saepe, modi voluptas, doloremque beatae necessitatibus perspiciatis. Facilis aspernatur repudiandae corporis repellat quae ipsa a iure quis! Officia rem, unde laboriosam explicabo vero animi alias nemo voluptas, odio nostrum deserunt iusto pariatur. Impedit modi sapiente ipsum, harum labore cum quis vitae, aliquam, architecto ex commodi! Neque tenetur excepturi ab alias dignissimos nam similique, delectus debitis doloremque id reprehenderit praesentium odio quibusdam! Molestiae quod in eius dignissimos vitae culpa, sequi aperiam explicabo, voluptates fuga laudantium distinctio repellat odit animi pariatur vero aut eaque ratione, nisi consequatur. Illum autem molestias aliquid qui doloribus eum rem nesciunt eius alias officiis earum facilis temporibus saepe ipsam mollitia, vitae voluptate, voluptatum sed possimus iure nihil tenetur? Nulla nemo repellendus dicta consequuntur totam hic! Soluta non assumenda laborum aspernatur harum minima quis nostrum, dignissimos recusandae deleniti molestias neque accusantium commodi repudiandae, optio quaerat voluptas, quasi aperiam consequuntur? Incidunt a, molestiae vel id accusantium error! Dolorem, exercitationem consequatur? Corrupti nostrum architecto fugiat modi vel ea magnam consectetur ullam aut obcaecati? Velit, modi harum sed, quod repudiandae quam aliquam saepe nostrum ipsam tenetur cumque. Debitis nam hic unde in iste quibusdam velit vitae itaque incidunt quisquam? Repellendus ex reiciendis natus alias ratione accusamus, incidunt voluptatibus nam dolore iste nostrum nobis architecto laudantium dolor modi labore quasi, aspernatur obcaecati voluptatum placeat nesciunt nulla similique deleniti! Reiciendis vitae quo animi magnam, rem quam temporibus corrupti officia, quos eligendi nesciunt officiis quasi provident, odit pariatur totam quidem atque voluptas porro alias eveniet voluptates repudiandae! Omnis esse, iusto ut molestiae, excepturi quam ea expedita velit praesentium dolores atque! Accusantium eos porro animi corporis, adipisci odio ratione aut modi, ex excepturi sed molestias quod. Accusamus illo repellendus consequuntur dolorum ducimus qui dicta. Voluptas voluptatibus deleniti, velit laboriosam recusandae suscipit commodi fuga tempora ipsa, eius enim. Quaerat corrupti quod cum sunt velit obcaecati blanditiis temporibus reiciendis dignissimos neque beatae aliquid nemo aliquam voluptatibus iste sed excepturi pariatur id, veniam, quibusdam accusamus minus? Eaque, ex! A suscipit totam aliquid laborum ullam sunt, error possimus. Id dolores veniam numquam natus? Sint quibusdam sapiente quasi, incidunt labore id excepturi laboriosam debitis corporis totam. Hic ullam corporis nemo dolorum, nesciunt sunt doloribus quos voluptatibus laudantium voluptatem? Accusamus quidem eaque molestias sint at reprehenderit eligendi ipsam velit. Labore corrupti voluptatum iste laboriosam modi ex optio commodi ad officiis enim nihil maxime eaque temporibus amet perspiciatis ipsam, hic iusto? Perferendis repellendus facere quam, sapiente aut at molestias voluptas porro, iste pariatur distinctio illum illo, eum voluptatum tenetur tempore unde voluptatem. Aspernatur, exercitationem! Velit quia unde esse rem voluptate, eaque non quaerat corporis ullam optio omnis minus totam animi qui provident? Totam placeat recusandae ipsum optio provident quos corporis distinctio beatae, nam officiis illum, asperiores, ipsa expedita ducimus esse sed rerum. Animi ea, doloremque id possimus quasi vitae aliquid nam veritatis aliquam ut perspiciatis error, blanditiis numquam officiis.</p>
</body>
</html>
Comment
