Show more toggle

A show more toggle is a disclosure whose region is text the reader can already partly see. That is the difference worth holding on to: nothing is hidden in the sense of being secret, so the control is a promise about length, not about content. Reviews, comments, product descriptions, and release notes all get clamped this way to keep a list scannable.

The clamp itself is usually -webkit-line-clamp with display: -webkit-box, or the newer line-clamp. Clamping by lines rather than by characters is what keeps the cut honest across widths and translations, and it means the toggle should only appear when the text actually overflowed. A “Show more” under three lines that were never truncated is the most common bug in this pattern, and the fix is to measure scrollHeight against clientHeight before rendering the control.

Make it collapse again. A one-way expansion is easier to build and leaves the reader stranded in a wall of text with the rest of the page pushed off screen, which is why the honest version says “Show less” on the way back. Label the control with what it will do, not with what it is showing, and give it aria-expanded plus aria-controls so it reads as one disclosure rather than as a stray link.

Two things this pattern must not be asked to do: hide content from search engines or from screen readers (the text is in the DOM either way, so use it as a progressive enhancement rather than a paywall), and hide the one line that actually answers the reader’s question. Clamped text should still make sense on its own.