javascript - React Native - hyphenation - Stack Overflow

admin管理员组

文章数量:1401133

I'm working on a React Native app where I show some text inside boxes. Sometimes the individual words in the boxes are too long to fit on one line so RN just breaks the word off when it would get too long and continues the text on the next line. This unfortunately leads to poor hyphenation of the words (see the left box in the image). I'm trying to find a solution to improve this such that in this example the result would be like the box on the right where the word is hyphenated at a reasonable point. I know there are javascript libraries that deal with hyphenation. This for example breaks words into their hyphens in an array. I'm stuck here because I have no idea how to actually figure out if I need to hyphenate the word or not. Any ideas?

I'm working on a React Native app where I show some text inside boxes. Sometimes the individual words in the boxes are too long to fit on one line so RN just breaks the word off when it would get too long and continues the text on the next line. This unfortunately leads to poor hyphenation of the words (see the left box in the image). I'm trying to find a solution to improve this such that in this example the result would be like the box on the right where the word is hyphenated at a reasonable point. I know there are javascript libraries that deal with hyphenation. This for example breaks words into their hyphens in an array. I'm stuck here because I have no idea how to actually figure out if I need to hyphenate the word or not. Any ideas?

• javascript
• reactjs
• react-native

Share Improve this question Follow edited Dec 14, 2022 at 16:06 AmerllicA 32.7k1717 gold badges144144 silver badges167167 bronze badges asked Apr 27, 2016 at 15:55 user3346601user3346601 1,04922 gold badges1111 silver badges1818 bronze badges 9

• Add a space between "t" and "N". A lower letter followed by a capital one seems to be the only rule you could apply here. Find all those cases in the string and prepend a space before the capital letter. – Sergiu Paraschiv Commented Apr 27, 2016 at 15:57
• This is just an example. What if the word was "Stackoverflow" - a long word without upper case letters in it – user3346601 Commented Apr 27, 2016 at 16:01
• Then there is no programatic rule to split it where a human would. – Sergiu Paraschiv Commented Apr 27, 2016 at 16:06
• 3 of course there are rules - I've linked to a javascript library that does splits word into their hypens - I just dont know what to do with it – user3346601 Commented Apr 27, 2016 at 16:11
• 2 OK, that could work. Only one big issue I can see. What happens with "analbum"? Solutions like this almost always have strange edge cases that you maybe can't ignore. – Sergiu Paraschiv Commented Apr 27, 2016 at 16:24

 |  Show 4 more ments

2 Answers 2

Sorted by: Reset to default 5

use C/C++/Java Encoding:

text = 'React\u00ADNative'
<Text>{text}</Text>

Actually, I used peni4142's answer to make a function to return a string that is able to be hyphenated:

const hyphenatedText = (text: string): string => 
  text
    .split(' ')
    .map((word) => word.split('').join('\u00AD'))
    .join(' ');

Now, if your hyphenatedText would be in a React Native Text ponent it would be hyphenated wrapped automatically.

本文标签： javascriptReact NativehyphenationStack Overflow