search

airbnb / react-sketchapp

render React components to Sketch ⚛️💎
http://airbnb.io/react-sketchapp/
MIT License
14.94k stars 822 forks source link

<Text> does not support numberOfLines or ellipsizeMode #270

Open dmeehan1968 opened 6 years ago

dmeehan1968 commented 6 years ago

👋 Hello! Thanks for contributing. Please use the template that matches your intention

I am...

------------------------------------------------------------------------------------------------- Reporting a bug or issue

NB: This is more for bookmarking purposes, it took me a while to uncover that Sketchapp does not support overflow/ellipsis, and felt that creating an issue would allow other people a shortcut.

Expected behavior:

React Native supports text truncation using a combination of numberOfLines and ellipsizeMode.

Observed behavior:

These properties have no effect in Sketch, because the Sketch application doesn't support them.

The <Text> component supports a resizeConstraints property with booleans of top, bottom, left, right, fixedWidth and fixedHeight, and although these have an effect on the containing element, they don't prevent the text from overflowing from the element and affecting element position (when combined with style height/width).

In the screenshot, I've highlighted the long text which has been wrapped to a second line. Note also the text properties which show the resizing constraint (height) and the height of 30 specified via the style={{height:30}}.

How to reproduce:

NB: No point in passing numberOfLines={1} or ellipsizeMode={'head'|'tail'|'middle'} as they are not passed to the underlying text component.

<Text style={{height: 30}} resizingConstraint={{fixedHeight: true}}>
  Home and away this is a very long project title
</Text>

Sketch version: 48.2

Please attach screenshots, a zip file of your project, and/or a link to your github project

sketch

dmeehan1968 commented 6 years ago

Whilst there is no inherent support for numberOfLines or ellipsizeMode, the reason why Sketchapp renders text outside its container appears to be a Sketch rendering bug. If you select and resize the text object manually, the overflow text is immediately clipped to the object bounds.

I've tried using overflow: 'hidden' on both the Text component's style, and on its containing View but neither prevents the text from overflowing.

I've discovered that there is a technique to place Sketch shapes inside Symbols, as the symbol adds an additional clipping facility (shapes cannot exceed the bounds of the symbol) and this might provide a workaround.