0

I am relatively new to React Native and styling with flex and have been looking for a way to break a long word at a specific point. I only want an optional break in case the word gets too long. In case 1 (see example) I don't want to break the word, since the component is big enough. In case 2 the component is too small so the word breaks. I would like to be able to control the breaking position to get something as in case 3.

I am looking for something similar to this solution for HTML, but I cannot use <wbr> or &#8203; and could not find an equivalent for React Native, if something like that exists. I have tried using \u00AD as suggested here, but it doesn't seem to insert a break.

Example:

// case1
––––––––––––––––––––––––––––––––––––––––––––––
|ReallyLongWordThatBreaksSomewhere           |
|                                            |
––––––––––––––––––––––––––––––––––––––––––––––

// case2
–––––––––––––––––––––––
|ReallyLongWordThatBre|
|aksSomewhere         |
|                     |
–––––––––––––––––––––––

// case3
–––––––––––––––––––––––
|ReallyLongWord       |
|ThatBreaks           |
|Somewhere            |
–––––––––––––––––––––––
turninglights
  • 301
  • 1
  • 2
  • 12
  • have you tried using `word` , i.e using backticks to break the line? – Gaurav Roy Nov 27 '19 at 03:14
  • 1
    it's not clear well i think, if you need to break a static string , just try like {"React \n Native"} – Adarsh Nov 27 '19 at 04:24
  • @turninglights...you need the long string just like this ??? String :- "the name is john" Breaked String :- "the name......." – abhikumar22 Nov 27 '19 at 05:40
  • I edited my question for clarification. I am looking for an optional break, so I cannot use static breaks like `\n`. – turninglights Nov 27 '19 at 07:56
  • 1
    I realised a mistake that I've been making. `​` should not be wrapped in curly brackets. Placed directly in `` works for me now. Although, in my case I have also Chinese characters, for which there doesn't seem to be a solution. – turninglights Nov 28 '19 at 02:16

0 Answers0