How to have Ellipsis effect on Text

Question

I m having a long text in my app and I need to truncate it and add three dots to the end   How can I do that in React Native Text element   Thanks

User · Answer

To Achieve ellipses for the text use the Text property numberofLines={1} which will automatically truncate the text with an ellipsis you can specify the ellipsizeMode as "head", "middle", "tail" or "clip" By default it is tail

https://reactnative.dev/docs/text#ellipsizemode

User · Answer

lt View     style            flexDirection   row           padding  10          gt     lt Text numberOfLines  5  style   flex 1   gt         This is a very long text that will overflow on a small device This is a very         long text that will overflow on a small deviceThis is a very long text that         will overflow on a small deviceThis is a very long text that will overflow         on a small device    lt  Text gt   lt  View gt

User · Answer

use numberOfLines  https   rnplay org plays ImmKkA edit  or if you know or can compute the max character count per row  JS substring may be used    lt Text gt     mytextvar  length  gt  maxlimit            mytextvar  substring 0 maxlimit-3                   mytextvar    lt  Text gt

User · Answer

You can use ellipsizeMode and numberOfLines  e g   lt Text ellipsizeMode  tail  numberOfLines  2  gt    This very long text should be truncated with dots in the beginning   lt  Text gt    https   facebook github io react-native docs text html

User · Answer

x000D   x000D  const styles   theme   gt     x000D   contentClass   x000D      overflow   hidden   x000D      textOverflow   ellipsis   x000D      display   -webkit-box   x000D      WebkitLineClamp 1  x000D      WebkitBoxOrient  vertical  x000D        x000D     x000D  render      x000D    return  x000D       lt div className  classes contentClass  gt  x000D          content   x000D       lt  div gt  x000D      x000D    x000D   x000D   x000D

User · Answer

lt Text ellipsizeMode  tail  numberOfLines  2  style   width 100   gt      Lorem ipsum dolor sit amet  consectetur adipiscing elit  Nam at cursus   lt  Text gt    Result  Lorem ipsum

User · Answer

Use the numberOfLines parameter on a Text component    lt Text numberOfLines  1  gt long long long long text lt Text gt    Will produce   long long long       Assuming you have short width container      Use the ellipsizeMode parameter to move the ellipsis to the head or middle  tail is the default value    lt Text numberOfLines  1  ellipsizeMode  head  gt long long long long text lt Text gt    Will produce      long long text     NOTE  The Text component should also include style    flex  1    when the ellipsis needs to be applied relative to the size of its container  Useful for row layouts  etc

[react-native] How to have Ellipsis effect on Text

Examples related to react-native

Examples related to ellipsis