Text numberOfLines={2} and ellipsizeMode="middle" breaks on Android
See original GitHub issue- I have reviewed the documentation
- I have searched existing issues
- I am using the latest React Native version
Line restriction with ellipsizeMode set in a Text componenet fails to preform any truncation on Android when numberOfLines={2} is set.
This fails: <Text numberOfLines={2} ellipsizeMode="middle" >Some long text • 10</Text>
This works: <Text numberOfLines={1} ellipsizeMode="middle" >Some long text • 10</Text>
Both of the above snippets work as expected on iOS.
Environment
Environment: OS: macOS Sierra 10.12.6 Node: 7.0.0 Yarn: Not Found npm: 3.10.8 Watchman: 4.9.0 Xcode: Xcode 9.2 Build version 9C40b Android Studio: 3.0 AI-171.4443003
Packages: (wanted => installed) react: 16.0.0 => 16.0.0 react-native: 0.53.0 => 0.53.0
Steps to Reproduce
On Android, combination of numberOfLines={2} and ellipsizeMode="middle" on a Text component fails to truncate the text and no ellipses are visible. When I remove ellipsizeMode it defaults to tail and it truncates the text without issue.
Code Snippet
//...
<Text
style={styles.text_name}
numberOfLines={2}
ellipsizeMode="middle"
>
{`${this.props.listItem.name} • ${this.props.listItem.quantity}`}
</Text>
//...
const styles = StyleSheet.create({
//...
text_name: {
color: ColorPalette.GREY.BLACK,
fontSize: 18,
fontFamily: fonts.proxima.semibold
},
//...
});
Check out my Snack reproducing this: FAILING WITH 2 LINES Here’s a Snack of it working with one line: WORKING WITH 1 LINE
Expected Behavior
I expect Android should have the same functionality as iOS
Correct iOS Screenshot

Actual Behavior
I have been working on this within my app and below is a screenshot of the section of my app where this is used.
Incorrect Android Screenshot

Extra Info
The reason I need ellipsizeMode="middle" is because I have a title and a number that I append to the title and want to always ensure that the number at the end is shown.
I have read through many of the issues about numberOfLines on this repo and I have not found anything that proposed a solution.
Any ideas?
Issue Analytics
- State:
- Created 5 years ago
- Reactions:7
- Comments:10
Top Related StackOverflow Question
same isuee. numberOfLines=1 works fine, but not for numberOfLine=2, 3, 4 …
nobody care this ?