2

The variable props.title is "Reichsbahn\u00ADausbesserungs\u00ADwerk Warschauer Straße" but the word breaks like this: Reichsbahnausbesse- rungswerk Warschauer Straße

How is this possible?

1

function Header(props) {
    const navigation = useNavigation();
    return (
        <View style={[styles.header, props.noArrow ? styles.headerNoArrow : null ]}>
            <Text style={[styles.headerText, props.style=="grey" ? styles.textDark : null ]}>{props.title}</Text>
            { !props.noArrow && 
            <TouchableOpacity onPress={() => navigation.goBack()}>
                <Image
                style={{width: 24, height: 22, top: 8, marginRight: 25 }}
                source={require('../../assets/images/arrow-left-yellow.png')}
                /> 
            </TouchableOpacity> 
            } 
        </View>

    )
   
}
export default Header


const styles = StyleSheet.create({
    header: {
        flexDirection: 'row',
        marginBottom: 20,
        paddingLeft: CSS.margin,
        marginTop: 20,
        minHeight: 70,
    },
    headerText: {
        color: CSS.grey,
        fontFamily: CSS.font1,
        fontSize: CSS.headlineSize,
        marginLeft: 5,
        marginRight: 10,
        lineHeight: CSS.headlineLH,
        flex: 1,
    },
    headerNoArrow: {
        marginBottom: 38
    },
    textDark: {
        color: '#1A2637'
    }
    
});
Konrad
  • 21,590
  • 4
  • 28
  • 64
Stuheimer
  • 21
  • 1
  • Does the containing element have a style that sets [`hyphens`](https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens)? – robertklep Aug 11 '22 at 18:57
  • Does this answer your question? [Soft hyphen in HTML ( vs. ­)](https://stackoverflow.com/questions/226464/soft-hyphen-in-html-wbr-vs-shy) – Konrad Aug 11 '22 at 18:58
  • 1
    @KonradLinkowski `\u00AD` in a JS string should render to the same value as `­` (or `­`) in HTML. The answers to that question don't answer why in this situation, apparently, the browser is auto-hyphenating and not using the inserted breakpoints. – robertklep Aug 11 '22 at 19:04

1 Answers1

0

I guess you mistook the HTML entity with CSS code.

Html entities uses &xxxx; syntax.

.wrap {
  width: 200px;
}

.shy {
  content: '\u00AD';
}
<p class="wrap">Reichsbahn&shy;ausbesserungs&shy;werk Warschauer Straße</p>

<p class="wrap">Reichsbahn<span class="shy"></span>ausbesserungs<span class="shy"></span>werk Warschauer Straße</p>
Konrad
  • 21,590
  • 4
  • 28
  • 64
  • Can you explain how your answer applies to the situation of OP, where they have a JS string that they want to soft-hyphenate when it gets rendered? Your answer only applies to HTML strings. – robertklep Aug 12 '22 at 04:07
  • My problem is happening in react native not in HTML. – Stuheimer Aug 12 '22 at 07:25