← 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-radius clips 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-overflow warning rather than failing.
  • When a box actually cuts content off, the render reports an overflow-clipped layout 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.