Read more

‹ Back

To add a read more link to a big block of text, all you need to do is add data-read-more on the container.
By default, the read more link will only show if the content is larger than the default cut-off point (200px)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione nobis, numquam voluptates, quas ipsam id nam sed sequi ex facilis debitis pariatur consequatur quaerat consectetur repellendus velit saepe amet cum blanditiis. Illo fuga quia tempora laborum iste nostrum debitis blanditiis excepturi ipsam, aliquid repellat labore totam praesentium dolorum, odit.

Dicta ea repellat enim corporis a quae aspernatur adipisci quis laudantium incidunt quasi, aliquam reprehenderit voluptatum officia quibusdam esse possimus nihil eos nisi accusantium quam. Ipsum id nostrum itaque similique quia nobis harum ea commodi maxime cum voluptatem odit cumque officia tempore architecto optio ab tempora culpa, accusamus earum atque sit ipsam temporibus voluptate. Deleniti perspiciatis sint quam quo placeat asperiores tempora explicabo qui. Nemo itaque, dignissimos distinctio impedit quas facere provident, repudiandae accusantium iste.

Aspernatur accusantium accusamus incidunt voluptatum aperiam? Debitis, at pariatur fugiat aspernatur nesciunt quisquam beatae et velit deserunt autem laboriosam, ducimus, omnis harum ullam consequatur repellendus cumque dicta ut vel maxime cum! Repellat voluptas reiciendis, ipsam ratione repellendus non saepe natus labore magni voluptatem veritatis molestiae itaque facere omnis consectetur delectus earum, fuga a assumenda culpa! Temporibus, tempora delectus enim eveniet ad quis officiis ipsam cumque saepe nemo unde, perferendis porro sed. Quo mollitia tenetur adipisci cumque.

<div class="content" data-read-more>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione nobis, numquam voluptates, quas ipsam id nam sed sequi ex facilis debitis pariatur consequatur quaerat consectetur repellendus velit saepe amet cum blanditiis. Illo fuga quia tempora laborum iste nostrum debitis blanditiis excepturi ipsam, aliquid repellat labore totam praesentium dolorum, odit.</p>
  <p>Dicta ea repellat enim corporis a quae aspernatur adipisci quis laudantium incidunt quasi, aliquam reprehenderit voluptatum officia quibusdam esse possimus nihil eos nisi accusantium quam. Ipsum id nostrum itaque similique quia nobis harum ea commodi maxime cum voluptatem odit cumque officia tempore architecto optio ab tempora culpa, accusamus earum atque sit ipsam temporibus voluptate. Deleniti perspiciatis sint quam quo placeat asperiores tempora explicabo qui. Nemo itaque, dignissimos distinctio impedit quas facere provident, repudiandae accusantium iste. </p>
  <p>Aspernatur accusantium accusamus incidunt voluptatum aperiam? Debitis, at pariatur fugiat aspernatur nesciunt quisquam beatae et velit deserunt autem laboriosam, ducimus, omnis harum ullam consequatur repellendus cumque dicta ut vel maxime cum! Repellat voluptas reiciendis, ipsam ratione repellendus non saepe natus labore magni voluptatem veritatis molestiae itaque facere omnis consectetur delectus earum, fuga a assumenda culpa! Temporibus, tempora delectus enim eveniet ad quis officiis ipsam cumque saepe nemo unde, perferendis porro sed. Quo mollitia tenetur adipisci cumque.</p>
</div>

Custom height

You can over-ride the minimum height by adding data-read-more-height="100" for example. You can change 100 to any numerical value.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione nobis, numquam voluptates, quas ipsam id nam sed sequi ex facilis debitis pariatur consequatur quaerat consectetur repellendus velit saepe amet cum blanditiis. Illo fuga quia tempora laborum iste nostrum debitis blanditiis excepturi ipsam, aliquid repellat labore totam praesentium dolorum, odit.

Dicta ea repellat enim corporis a quae aspernatur adipisci quis laudantium incidunt quasi, aliquam reprehenderit voluptatum officia quibusdam esse possimus nihil eos nisi accusantium quam. Ipsum id nostrum itaque similique quia nobis harum ea commodi maxime cum voluptatem odit cumque officia tempore architecto optio ab tempora culpa, accusamus earum atque sit ipsam temporibus voluptate. Deleniti perspiciatis sint quam quo placeat asperiores tempora explicabo qui. Nemo itaque, dignissimos distinctio impedit quas facere provident, repudiandae accusantium iste.

Aspernatur accusantium accusamus incidunt voluptatum aperiam? Debitis, at pariatur fugiat aspernatur nesciunt quisquam beatae et velit deserunt autem laboriosam, ducimus, omnis harum ullam consequatur repellendus cumque dicta ut vel maxime cum! Repellat voluptas reiciendis, ipsam ratione repellendus non saepe natus labore magni voluptatem veritatis molestiae itaque facere omnis consectetur delectus earum, fuga a assumenda culpa! Temporibus, tempora delectus enim eveniet ad quis officiis ipsam cumque saepe nemo unde, perferendis porro sed. Quo mollitia tenetur adipisci cumque.

<div class="content" data-read-more data-read-more-height="100">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione nobis, numquam voluptates, quas ipsam id nam sed sequi ex facilis debitis pariatur consequatur quaerat consectetur repellendus velit saepe amet cum blanditiis. Illo fuga quia tempora laborum iste nostrum debitis blanditiis excepturi ipsam, aliquid repellat labore totam praesentium dolorum, odit.</p>
  <p>Dicta ea repellat enim corporis a quae aspernatur adipisci quis laudantium incidunt quasi, aliquam reprehenderit voluptatum officia quibusdam esse possimus nihil eos nisi accusantium quam. Ipsum id nostrum itaque similique quia nobis harum ea commodi maxime cum voluptatem odit cumque officia tempore architecto optio ab tempora culpa, accusamus earum atque sit ipsam temporibus voluptate. Deleniti perspiciatis sint quam quo placeat asperiores tempora explicabo qui. Nemo itaque, dignissimos distinctio impedit quas facere provident, repudiandae accusantium iste. </p>
  <p>Aspernatur accusantium accusamus incidunt voluptatum aperiam? Debitis, at pariatur fugiat aspernatur nesciunt quisquam beatae et velit deserunt autem laboriosam, ducimus, omnis harum ullam consequatur repellendus cumque dicta ut vel maxime cum! Repellat voluptas reiciendis, ipsam ratione repellendus non saepe natus labore magni voluptatem veritatis molestiae itaque facere omnis consectetur delectus earum, fuga a assumenda culpa! Temporibus, tempora delectus enim eveniet ad quis officiis ipsam cumque saepe nemo unde, perferendis porro sed. Quo mollitia tenetur adipisci cumque.</p>
</div>

Custom label

Don't like read more? Try adding a data-read-more-label attribute with the value of your choice!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione nobis, numquam voluptates, quas ipsam id nam sed sequi ex facilis debitis pariatur consequatur quaerat consectetur repellendus velit saepe amet cum blanditiis. Illo fuga quia tempora laborum iste nostrum debitis blanditiis excepturi ipsam, aliquid repellat labore totam praesentium dolorum, odit.

Dicta ea repellat enim corporis a quae aspernatur adipisci quis laudantium incidunt quasi, aliquam reprehenderit voluptatum officia quibusdam esse possimus nihil eos nisi accusantium quam. Ipsum id nostrum itaque similique quia nobis harum ea commodi maxime cum voluptatem odit cumque officia tempore architecto optio ab tempora culpa, accusamus earum atque sit ipsam temporibus voluptate. Deleniti perspiciatis sint quam quo placeat asperiores tempora explicabo qui. Nemo itaque, dignissimos distinctio impedit quas facere provident, repudiandae accusantium iste.

Aspernatur accusantium accusamus incidunt voluptatum aperiam? Debitis, at pariatur fugiat aspernatur nesciunt quisquam beatae et velit deserunt autem laboriosam, ducimus, omnis harum ullam consequatur repellendus cumque dicta ut vel maxime cum! Repellat voluptas reiciendis, ipsam ratione repellendus non saepe natus labore magni voluptatem veritatis molestiae itaque facere omnis consectetur delectus earum, fuga a assumenda culpa! Temporibus, tempora delectus enim eveniet ad quis officiis ipsam cumque saepe nemo unde, perferendis porro sed. Quo mollitia tenetur adipisci cumque.

<div class="content" data-read-more data-read-more-label="Keep reading...">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione nobis, numquam voluptates, quas ipsam id nam sed sequi ex facilis debitis pariatur consequatur quaerat consectetur repellendus velit saepe amet cum blanditiis. Illo fuga quia tempora laborum iste nostrum debitis blanditiis excepturi ipsam, aliquid repellat labore totam praesentium dolorum, odit.</p>
  <p>Dicta ea repellat enim corporis a quae aspernatur adipisci quis laudantium incidunt quasi, aliquam reprehenderit voluptatum officia quibusdam esse possimus nihil eos nisi accusantium quam. Ipsum id nostrum itaque similique quia nobis harum ea commodi maxime cum voluptatem odit cumque officia tempore architecto optio ab tempora culpa, accusamus earum atque sit ipsam temporibus voluptate. Deleniti perspiciatis sint quam quo placeat asperiores tempora explicabo qui. Nemo itaque, dignissimos distinctio impedit quas facere provident, repudiandae accusantium iste. </p>
  <p>Aspernatur accusantium accusamus incidunt voluptatum aperiam? Debitis, at pariatur fugiat aspernatur nesciunt quisquam beatae et velit deserunt autem laboriosam, ducimus, omnis harum ullam consequatur repellendus cumque dicta ut vel maxime cum! Repellat voluptas reiciendis, ipsam ratione repellendus non saepe natus labore magni voluptatem veritatis molestiae itaque facere omnis consectetur delectus earum, fuga a assumenda culpa! Temporibus, tempora delectus enim eveniet ad quis officiis ipsam cumque saepe nemo unde, perferendis porro sed. Quo mollitia tenetur adipisci cumque.</p>
</div>

Show return link

You can add a return link by adding data-read-more-return attribute with the value of whatever you want the return link to say.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione nobis, numquam voluptates, quas ipsam id nam sed sequi ex facilis debitis pariatur consequatur quaerat consectetur repellendus velit saepe amet cum blanditiis. Illo fuga quia tempora laborum iste nostrum debitis blanditiis excepturi ipsam, aliquid repellat labore totam praesentium dolorum, odit.

Dicta ea repellat enim corporis a quae aspernatur adipisci quis laudantium incidunt quasi, aliquam reprehenderit voluptatum officia quibusdam esse possimus nihil eos nisi accusantium quam. Ipsum id nostrum itaque similique quia nobis harum ea commodi maxime cum voluptatem odit cumque officia tempore architecto optio ab tempora culpa, accusamus earum atque sit ipsam temporibus voluptate. Deleniti perspiciatis sint quam quo placeat asperiores tempora explicabo qui. Nemo itaque, dignissimos distinctio impedit quas facere provident, repudiandae accusantium iste.

Aspernatur accusantium accusamus incidunt voluptatum aperiam? Debitis, at pariatur fugiat aspernatur nesciunt quisquam beatae et velit deserunt autem laboriosam, ducimus, omnis harum ullam consequatur repellendus cumque dicta ut vel maxime cum! Repellat voluptas reiciendis, ipsam ratione repellendus non saepe natus labore magni voluptatem veritatis molestiae itaque facere omnis consectetur delectus earum, fuga a assumenda culpa! Temporibus, tempora delectus enim eveniet ad quis officiis ipsam cumque saepe nemo unde, perferendis porro sed. Quo mollitia tenetur adipisci cumque.

<div class="content" data-read-more data-read-more-label="Show more" data-read-more-return="Show less">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione nobis, numquam voluptates, quas ipsam id nam sed sequi ex facilis debitis pariatur consequatur quaerat consectetur repellendus velit saepe amet cum blanditiis. Illo fuga quia tempora laborum iste nostrum debitis blanditiis excepturi ipsam, aliquid repellat labore totam praesentium dolorum, odit.</p>
  <p>Dicta ea repellat enim corporis a quae aspernatur adipisci quis laudantium incidunt quasi, aliquam reprehenderit voluptatum officia quibusdam esse possimus nihil eos nisi accusantium quam. Ipsum id nostrum itaque similique quia nobis harum ea commodi maxime cum voluptatem odit cumque officia tempore architecto optio ab tempora culpa, accusamus earum atque sit ipsam temporibus voluptate. Deleniti perspiciatis sint quam quo placeat asperiores tempora explicabo qui. Nemo itaque, dignissimos distinctio impedit quas facere provident, repudiandae accusantium iste. </p>
  <p>Aspernatur accusantium accusamus incidunt voluptatum aperiam? Debitis, at pariatur fugiat aspernatur nesciunt quisquam beatae et velit deserunt autem laboriosam, ducimus, omnis harum ullam consequatur repellendus cumque dicta ut vel maxime cum! Repellat voluptas reiciendis, ipsam ratione repellendus non saepe natus labore magni voluptatem veritatis molestiae itaque facere omnis consectetur delectus earum, fuga a assumenda culpa! Temporibus, tempora delectus enim eveniet ad quis officiis ipsam cumque saepe nemo unde, perferendis porro sed. Quo mollitia tenetur adipisci cumque.</p>
</div>