Text Layers » Truncation


So much text, too much text, it doesn’t fit …

There are two properties to hide extraneous text: textOverflow and truncate.

Text Overflow

The two textOverflow options
Download Framer project

Setting textOverflow to "ellipsis" will signal overflowing text with an ‘…’. The other option, "clip”, will just cut off the text at the first line.

You need to set a fixed height for this to work, so don’t use autoHeight or autoSize on a text block that you want to truncate.

The height of your layer defines how many lines will be shown. It can be tricky to find the correct height, though, so here’s a tip:

Pro tip: Use fontSize and lineHeight to calculate the height for a certain amount of lines:

textLayer.height = ( textLayer.fontSize * textLayer.lineHeight ) * 2


There’s also truncate; setting it to yes will let the text overflow with an ellipsis.

textA = new TextLayer
    text: "Very long text, that needs some truncation, because it’ll never fit on this small mobile screen."
    truncate: yes