Text Component ellipsis is not displayed correctly in Android (sometimes the three dots are cut-off)

Description

When I set numberOfLines={1} on a Text component, if the parent's component width is fixed, sometimes the ellipsis is cut-off strangely. For example, in the below screenshot, you can see that only 1 and a half dots of the ellipsis are shown.

It seems to only happen on Android and on most devices that I've tried.

Version

0.63.2

Output of `npx react-native info`

info Fetching system and libraries information...
System:
    OS: macOS 11.6.4
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 23.08 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.1/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.0 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3
    Android SDK:
      API Levels: 28, 29, 30
      Build Tools: 28.0.3, 29.0.2, 30.0.2
      System Images: android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.6953283
    Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_292 - /Users/ryanphung/.sdkman/candidates/java/current/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz => 0.63.2 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

Please refer to the below code / snack.

Snack, code example, screenshot, or link to a repository

Here is the minimal reproducible code. Link to snack.

import React from 'react'
import { View, Text } from 'react-native'

export default () =>
  <View style={{alignItems: 'center', justifyContent: 'center', height: '100%'}}>
    <View style={{width: 173, padding: 24, backgroundColor: 'yellow'}}>
      <Text style={{fontSize: 30}} numberOfLines={1}>This text will be cut-off strangely in Android</Text>
    </View>
  </View>

@ryanphung

I have this issue as well! Did you ever find a solution? @ryanphung

Same

Any updates on this?

@ryanphung

Any update on this issue? @ryanphung

@ryanphung

Any update on this issue? @ryanphung

same issue on RN0.62.2

It looks like your issue or the example you provided uses an unsupported version of React Native. Due to the amount of issues we receive, we're currently accepting only new issues against one of the supported version. Please open your issue on StackOverflow to get further community support.

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

Same issue on 0.71.3 when you use custom font #36350

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

This issue was closed because the author hasn't provided the requested feedback after 7 days.

Do you still experience this issue?

I have four years of experience maintaining facebook/react-native and I specialize in the Text and TextInput components. I currently have 58 facebook/react-native PRs.

If you still experience this issue, I will prepare a patched release with the fix.

Thanks a lot

@fabOnReact

@fabOnReact is it possible to get ellipsis to show when parent has fixed height, and the doesn't have numberOfLines on it? I want to show ellipsis when theres no more room while I dont know how many number of lines would fit.

Navigation Menu

Repository navigation

Text Component ellipsis is not displayed correctly in Android (sometimes the three dots are cut-off) #33487

Description

Version

Output of `npx react-native info`

Steps to reproduce

Snack, code example, screenshot, or link to a repository

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Text Component ellipsis is not displayed correctly in Android (sometimes the three dots are cut-off) #33487

Description

Description

Version

Output of npx react-native info

Steps to reproduce

Snack, code example, screenshot, or link to a repository

Activity

Zmwang622 commented on Aug 30, 2022

Orange9000 commented on Dec 13, 2022

jabirmhd commented on Dec 22, 2022

deva1493 commented on Jan 12, 2023

soyouwantme commented on Jan 17, 2023

github-actions commented on Feb 9, 2023

github-actions commented on Mar 5, 2023

alexxxwork commented on Mar 9, 2023

github-actions commented on Apr 3, 2023

github-actions commented on Apr 10, 2023

fabOnReact commented on Jan 17, 2024

Noitidart commented on Apr 12, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Output of `npx react-native info`