Novadesk Docs

Appearance

Text Clip ​

A visual reference for the textClip property on addText elements. Controls what happens when text overflows its bounding box.

Table of Contents ​

How It Works ​

Every text element has a fixed bounding box (width × height). When the text is longer than the box, textClip decides how to handle the overflow.

Bounding box: width: 150px, height: 40px

Text: "This is a very long text that overflows"

All 4 Behaviors ​

"none" (default) ​

Text overflows without any clipping — it paints outside the bounding box.

This is a very long text that overflows
textClip: "none" — text paints outside the box
javascript
ui.addText({
  id: "overflow",
  text: "This is a very long text that overflows",
  x: 16, y: 20,
  width: 150, height: 40,
  textClip: "none"           // default
});

"clip" / "on" ​

Hard clip at the element boundary — text is cut off sharply at the edge.

This is a very long text that overflows
textClip: "clip" — text cut off at edge
javascript
ui.addText({
  id: "clipped",
  text: "This is a very long text that overflows",
  x: 16, y: 70,
  width: 150, height: 40,
  textClip: "clip"           // or "on"
});

"ellipsis" ​

Clip with a trailing … — shows the text fits, then adds an ellipsis.

This is a very long text that overflows
textClip: "ellipsis" — clipped with trailing …
javascript
ui.addText({
  id: "ellipsis",
  text: "This is a very long text that overflows",
  x: 16, y: 120,
  width: 150, height: 40,
  textClip: "ellipsis"
});

"wrap" ​

Wrap text to additional lines within the element width.

This is a very long text that overflows
textClip: "wrap" — text wraps to next line
javascript
ui.addText({
  id: "wrapped",
  text: "This is a very long text that overflows",
  x: 16, y: 170,
  width: 150, height: 70,
  textClip: "wrap"
});

Side-by-Side Comparison ​

All 4 behaviors on the same text, same box size:

Long text here
"none"
Long text here
"clip"
Long text here
"ellipsis"
Long text here
"wrap"

When to Use Each ​

Value Best For
"none" Text that should always be fully visible, large elements
"clip" Hard cutoff, progress bars with labels
"ellipsis" Filenames, labels, truncated titles
"wrap" Descriptions, notes, multi-line content

Code Examples ​

Truncated Filename ​

javascript
ui.addText({
  id: "filename",
  text: "my-really-long-document-name-final-v2.xlsx",
  x: 16, y: 20,
  width: 200, height: 20,
  fontSize: 12,
  textClip: "ellipsis",
  fontColor: "rgb(200,200,200)"
});

Wrapped Description ​

javascript
ui.addText({
  id: "description",
  text: "This widget displays real-time system metrics including CPU, memory, disk usage, and network throughput.",
  x: 16, y: 60,
  width: 260, height: 60,
  fontSize: 12,
  textClip: "wrap",
  fontColor: "rgb(180,180,180)"
});

Hard Clipped Badge ​

javascript
ui.addText({
  id: "badge",
  text: "NEW FEATURE",
  x: 16, y: 120,
  width: 80, height: 20,
  fontSize: 10,
  fontWeight: "bold",
  textClip: "clip",
  fontColor: "rgb(0,180,255)",
  backgroundColor: "rgba(0,180,255,0.15)"
});

Quick Reference ​

I want to... Use
Default — let text overflow textClip: "none" (or omit)
Cut off text at edge textClip: "clip"
Show … when truncated textClip: "ellipsis"
Wrap to multiple lines textClip: "wrap"