Skip to content

Long text with max height shown cut #2730

@gayablau

Description

@gayablau

Is there an existing issue for this?

  • I have searched the existing issues

Describe the issue

Long text in a fixed size height shown cut, cant declare numberOfLines because the text length and the height are different in different cases.

image

Expected behavior

the expected resolute (works well in mobile)
we want the text to cut where it is fully shown even if it is smaller than the specified height
image

Steps to reproduce

example:

import React from 'react';
import {Text} from 'react-native';

const Test = ({maxHeight}) => {
  return (<Text ellipsizeMode={'tail'} style={{maxHeight, borderWidth: 2, borderColor: 'blue', textOverflow: 'ellipsis', overflow: 'hidden'}}>1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1  1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 12 2 2 2  22  2 22  2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2  33  3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3  33 3 3  33 3 3 3 3 33  3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 4  4 4 4 4 4 4 4 4 4 4 4 4 4 4  4 4 4 4 4 4 4 4 4 4 4 4 4  4 4 4 4 4 4 4 4  4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 5 5 5 5 5 5 5 5 5  5 5 5 5 5 55  5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 </Text>)
};

export default Test;

React Native: Version 0.71.19
browser: Google Chrome Version 129.0.6668.101 (Official Build) (arm64)
Simulator: IOS 17.5

Test case

https://codesandbox.io/p/sandbox/heuristic-agnesi-454mfc?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cm2rj4i7200063b6lro894rri%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cm2rj4i7200023b6lujbq79wh%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cm2rj4i7200033b6lg213ubr8%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cm2rj4i7200053b6leepaibn0%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cm2rj4i7200023b6lujbq79wh%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm2rj4i7200013b6lvdpvc45g%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522cm2rj5779002x3b6lxxyh5ddt%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A16%252C%2522startColumn%2522%253A19%252C%2522endLineNumber%2522%253A16%252C%2522endColumn%2522%253A19%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252FApp.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522cm2rj4i7200023b6lujbq79wh%2522%252C%2522activeTabId%2522%253A%2522cm2rj5779002x3b6lxxyh5ddt%2522%257D%252C%2522cm2rj4i7200053b6leepaibn0%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm2rj4i7200043b6lhipc3onp%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522cm2rj4i7200053b6leepaibn0%2522%252C%2522activeTabId%2522%253A%2522cm2rj4i7200043b6lhipc3onp%2522%257D%252C%2522cm2rj4i7200033b6lg213ubr8%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522cm2rj4i7200033b6lg213ubr8%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Additional comments

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions