Click to Expand
Long quote truncated with -webkit-line-clamp; a Read more button reveals the rest. aria-expanded reflects state for screen readers — the canonical truncate pattern.
Click to Expand the 18th of 19 designs in the 19 CSS Blockquote Designs collection. The design pairs CSS styling with a small amount of JavaScript for interactivity. Copy the HTML, CSS and JavaScript panels below into your project — the JS is self-contained, has zero dependencies, and is safe to drop into any framework (React, Vue, Svelte, plain HTML). The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<figure class="cbq-expand">
<blockquote>
<p class="cbq-expand-text">
"Software engineering is not really about computers. It's about people: the people you build
for, the people you build with, and the future-you who has to maintain whatever you ship
today. Every line of code is a little contract with all of them."
</p>
</blockquote>
<button type="button" class="cbq-expand-btn" aria-expanded="false">Read more</button>
<figcaption>— Jen Rodriguez, Staff Engineer</figcaption>
</figure> .cbq-expand {
max-width: 340px;
padding: 22px;
background: #18181f;
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 14px;
font-family: system-ui, sans-serif;
color: #f0eeff;
}
.cbq-expand blockquote {
margin: 0;
}
.cbq-expand-text {
margin: 0;
font-size: 14px;
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
transition: -webkit-line-clamp 0.3s ease;
}
.cbq-expand-text.is-open {
-webkit-line-clamp: 99;
}
.cbq-expand-btn {
margin-top: 10px;
padding: 4px 10px;
background: transparent;
color: #a78bfa;
border: 1px solid rgba(167, 139, 250, 0.4);
border-radius: 6px;
font: inherit;
font-size: 12px;
cursor: pointer;
transition:
background 0.15s,
border-color 0.15s;
}
.cbq-expand-btn:hover {
background: rgba(167, 139, 250, 0.1);
border-color: #a78bfa;
}
.cbq-expand-btn:focus-visible {
outline: 2px solid #a78bfa;
outline-offset: 2px;
}
.cbq-expand figcaption {
margin-top: 14px;
font-size: 12px;
color: #b8b6d4;
} (function () {
document.querySelectorAll(".cbq-expand").forEach(function (root) {
var btn = root.querySelector(".cbq-expand-btn");
var text = root.querySelector(".cbq-expand-text");
if (!btn || !text) return;
btn.addEventListener("click", function () {
var open = text.classList.toggle("is-open");
btn.setAttribute("aria-expanded", String(open));
btn.textContent = open ? "Read less" : "Read more";
});
});
})();