← All updates
Fixed-size clipped boxes with overflow: hidden
Templates can now declare hard boxes — set overflow: "hidden" with a numeric height and content is clipped to the box instead of stretching it or pushing siblings around.
dsllayoutstyles
Templates can now declare a hard box. Set overflow: "hidden" together with a numeric height and the element is exactly that tall: anything that does not fit is clipped at the box edge instead of stretching the box or pushing its siblings down.
col(
{
height: 120,
overflow: "hidden",
"border-radius": 8,
"background-color": "#f5f5f5",
},
text(span("Long copy that gets visually cut off at the rounded box edge…"))
);
A few details worth knowing:
- Background and border still paint; the border stays visible even where content is clipped.
border-radiusclips a rounded rect, not just square corners.- It works in flow and on
position: "absolute"elements, so stamps and canvas-style boards can clip too. - Pagination stays safe: a clipped box is never split across pages. A box taller than the page is placed whole and the render reports a
page-split-overflowwarning rather than failing. - When a box actually cuts content off, the render reports an
overflow-clippedlayout warning — shape only (element tag and measurements), never the document's text. - Clipped-away content stays tagged in the structure tree, so accessibility is not silently degraded.
overflow is documented in the skill file under style properties, and is available in both DSL and JSON templates.