OneTaskBy Tim King · Updated
Read More Button Generator
Expand and Collapse Text with CSS and JS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Read More Builder works
A read more button shows the first few lines of a long block of text and reveals the rest on click. This builder clips the text to the lines you choose, fades the cut edge and writes an accessible Read more and Read less button with the HTML, CSS and script to copy.
Product descriptions, reviews, bios and FAQ answers often run longer than the layout allows. A read more toggle keeps the page short without hiding the text from search engines, because every word stays in the HTML and is only clipped visually.
How the read more button works
The content box gets a fixed height in em equal to the number of lines times the line height,
with overflow: hidden. A ::after gradient from transparent to the background colour fades the
last line so the cut looks intentional. The button is a real <button> with aria-expanded and
aria-controls, so screen readers announce whether the text is open and which region it controls.
Clicking it toggles an is-open class that sets the height to auto.
Smooth expanding to height auto
Browsers have never been able to animate to height: auto. The new
interpolate-size: allow-keywords property fixes that: Chrome and Edge animate the expand
smoothly, and other browsers simply open instantly, which still works. People who ask for reduced
motion get no transition at all.
FAQ
Is text hidden behind read more bad for SEO?
No. The full text is in the page source, and Google indexes content that is visually collapsed for layout reasons. Avoid loading the rest of the text only after the click with a fetch request, because that content may not be indexed.
Why not use the line-clamp property instead?
line-clamp adds an ellipsis at the cut and is perfect for fixed previews such as card titles,
but it only clips a single block and cannot animate open. A height-based clip works across several
paragraphs and headings, which is what long descriptions usually have.
Can I have several read more sections on one page?
Yes. The script attaches to every .read-more__toggle it finds. Give each content box a unique
id and point its button's aria-controls at that id, so every button controls its own section.
What should the Read more label say?
Keep it short and specific when you can, such as "Read the full review" or "Show all ingredients". Screen reader users often list every button on a page, and ten buttons that all say "Read more" are hard to tell apart.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Expandable Card
Collapsible card built on details/summary, no JavaScript.
Line Clamp Helper
Truncate text after a set number of lines with an ellipsis.
Text Highlight Effect
Style a highlighter-pen mark on key words and copy the CSS.
Drop Cap Generator
Style a magazine drop cap for the first letter and copy the CSS.
Reading Progress Bar
Make a scroll progress bar for articles and copy the CSS and JS.