diegomura / diegomura/react-pdf

Text overflow doesn't work when inside a "row" flex direction

Open
#2,005 2 comments 2 reactions 0 assignees View on GitHub
enhancement
Dominant language
TypeScript
Stars
16.8k
Forks
1.3k
Avg merge
5h 6m
Merged PRs (30d)
52

Description

**Describe the bug**

When you have two containers side-by-side with text overflow, several things happen that are unexpected:

- Text overflow doesn't work
- Elements are pushed outside their parent container

**To Reproduce**

```
const styles = {
container: {
flexDirection: 'row'
},
left: {
flexGrow: 1,
overflow: 'hidden',
textOverflow: 'ellipsis',
maxLines: 1,
}
};

function TextOverflowError() {
return (




Some very long text here that should have an ellipsis because it won't fit fully


Fixed text




);
}

ReactPDF.render();
```

See REPL repro [here](https://react-pdf.org/repl?code=3187b0760ce02e004d09e01b02984605e181bc05037cca185008602598c804e017367818c016c990399351d013000c00d037c017d06322519313ab91a31000dda8033442003b9d00e44cc80133d52b58b9f92400f2801e4955551bb724488c80070864231a17202d897300190a543a004613114161006e1c1c6500573060283270180015644b1b15357500512a2a102a000a004a7a462a642844aa3018729f46001e0011106044df2928003e36d31876800512366461d1b9b1803532647538282464742c041408003a09724a2a6159f9f3f6eccb358dad9dd403f049625391f3b9c2e6e4984444b6122a0c10c3f120c000b2241493048fc207210889780806060102f800467514722008e8965a94deef5309140543d003fab0d44c1a1305f225804c645a590be572e312f08519014005bd077d7414c41b1918622713186a3430310908017a82a43012340c8ce6a08161240a551feaae23b1123098295807ce6aa949c8f824aa5f87fa8b9164ba9e8ca7b1800154c0a09033941c09233be90043b402949a0bc7c38000e3b6bed0e883075c64600019f9af2b42f9c3d8a66a1617a2e4ca60f0180c73190a8080d032a4d4a20a1f46eaebb09431190002b354fceb301e75128101d68a005fcd57306d114717211bc4920011f75fa46a82cbeedf050c5a3c2380207d01766fb503a9a1a754492cbe147c5fbda1c065980299ec2a20cda85adc2030794afc279c02412270a0e4e002922440ea8c71a204aadee0738893ba3015e9b9f6ca32cd01f6441c08925e35a24f62de0fb9c6a3d29e2f8dabf6b280a8840c588406ca42a0b31b4b8054090adbfef8591f3128ce19464181145e668161a8a7ad9180028c02a91e841aa82afaaabf895972fc5ccd38a63c5ca03af40080ca6856c91b120262143465cb623f0a0ff0f124169a31964a050507963037cd442af3929ecada687ca4aac231aaa101f2ce69852078018f14e19a3d25a07b51302d6fe0f1f29a120052861719e8006254278dc461515c8c82e5605805cb40a52d2fa30662af165b3e29172c42822bbb6f257170b95e21a2ae0a0e61905997ecfa9acc680605c64d116f2580dda243fb02a51d5200c4301b05c58003410fe1e8541fc6da02158903bb3572a827192a9e8008af8b502aa18cfa026173c02bedf802510059752a218962c0a3d642f6148c0c8a3da82eaa0b94614aadfb22d09da307cc4d59940990ca33d29190cab66038902b594a8069f0a18d02c66a880df7c910300c57a2522543ab246147280910ddbd41b8465a8453baec700533d93968dcc031487979322dd917682a0ef6be96dae16af4cfe64005d7a821c8cde2c4ba60d5dfbd5bd00c9b4c0ad8e1b2caa596fa25292637347a000979f8d2cc5d329a8a2a5a1c92adf0965b62e5e57b4003d15c433f1e1d2c2b19c171879334cf1dc8e1f74bd3f4c40a7951c4c23c40012b20a4940e3274055ec00de5e525c39358b63d845094650c061e0c39ce0400)

**Expected behavior**

I'm expecting something like this:

![image](https://user-images.githubusercontent.com/226640/188335295-1be86c61-53c3-4c63-b1f7-3fd7654c84ad.png)

**Actual behavior**

But this is what `react-pdf` renders:

![image](https://user-images.githubusercontent.com/226640/188335284-873d2c1c-c752-4978-83be-068a4e382d59.png)

**Desktop (please complete the following information):**
- OS: MacOS
- Browser: Chrome
- React-pdf version: 3.0.0

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.