Overflow

Controls overflowing content.

html

<div class="ov-wrap" role="img" aria-label="A fixed-height container whose overflow property decides what happens to content taller than it">
  <div class="ov-box" style="height:90px;overflow:hidden;background:#BFD9F2;">
    <p class="ov-text">Short line one. And a second sentence. And a third sentence, long enough to push past the container's fixed height so overflow has something to do.</p>
  </div>
  <p class="ov-caption">overflow: hidden &middot; height 90px</p>
</div>
<style>
.ov-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 300px; }
.ov-box { width: 100%; border-radius: 8px; padding: 10px; box-sizing: border-box; border: 1.5px solid #24143033; }
.ov-text { margin: 0; font-weight: 600; }
.ov-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; }
</style>

tailwind

<div class="font-sans text-[#241430] w-[300px]" role="img" aria-label="A fixed-height container whose overflow property decides what happens to content taller than it">
  <div class="w-full rounded-lg p-2.5 box-border border-[1.5px] border-[#24143033]" style="height:90px;overflow:hidden;background:#BFD9F2;">
    <p class="m-0 font-semibold">Short line one. And a second sentence. And a third sentence, long enough to push past the container's fixed height so overflow has something to do.</p>
  </div>
  <p class="mt-2.5 text-xs text-[#241430]/80">overflow: hidden &middot; height 90px</p>
</div>

react

export function OverflowDemo({
  overflow = "hidden",
  height = 90,
  longContent = true,
  background = "#BFD9F2",
}) {
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", width: 300 }}
      role="img" aria-label="A fixed-height container whose overflow property decides what happens to content taller than it">
      <div style={{ width: "100%", height, overflow, background, borderRadius: 8, padding: 10, boxSizing: "border-box", border: "1.5px solid #24143033" }}>
        <p style={{ margin: 0, fontWeight: 600 }}>
          Short line one.{longContent && " And a second sentence. And a third sentence, long enough to push past the container's fixed height so overflow has something to do."}
        </p>
      </div>
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430cc" }}>overflow: {overflow} &middot; height {height}px</p>
    </div>
  );
}