diegomura / diegomura/react-pdf
Text overflows vertically when trying to render tables
- Dominant language
- TypeScript
- Stars
- 16.8k
- Forks
- 1.3k
- Avg merge
- 5h 6m
- Merged PRs (30d)
- 52
Description
**Describe the bug**
When trying to render a table with long text content in its cells, the text frequently overflows out of their respective cells. Also probably semi related, but borders will sometimes follow the overflowing text in being drawn over elements such as footers.
I've tried suggestions in other issues (like splitting the text before passing it as a child to a `` component) and none of them fixed the issue for me.
**To Reproduce**
[REPL example](https://react-pdf.org/repl?code=3187b0760ce02e00404201902a8144605e181c80c40063c00e005802301d8b01b80281b44966804f006c0530831806528df63c005bb765001d30004eec021947600280378d1830003ac80e6ec0170c55ebd403370507804b005efbb00463c1aa16353002f801a37263800f002510007703236300134b080d565966032c5f763f2c6f631864bf00114b1960284b7044a910b4b775005b59296d4b3044bc71002600567ad7752f1f7f0049054ab08accff037b376ef50d295902cb60765eb033218cb330280075764b6d212844d2105608ce8f74cd1d7600093928b06d55e375ad9dbd83ec2393f2b5f32b5b44b349c2e0985c161b760c82200594b044221c27a9946306685dd40a3f1400082ac5d835b0e085148ce934bae8007200574aa912148ccb99b6bb7da1d8ea7505b9802260001acf1d01e3b0e6e05bac9ee8f4330d48b35e7694a54b004400c2c7101480c88543a260a0563ab12c121258143f63262a0001519a40cc5241b60a91a0d24380b2083b0cda6265bd599f7657b191b7f9d8b040e7206b4f0faa4ab0ad08e7231b252222a519609c2a04244ac8a950102068e5208a42f802448418e70c2faa4b524da67b3307b0ea8b75808b2b68d831e15bb5c85c040507ce541b112ccf71330283263841509a722d158bc5125940d6572f942b15b0a560a922e3394fb155ac06564c67de2e97f8a9ac256f1a76bdd6c713e6cbf210876098bbe3a6ef6d2bf65225a200686f80153b1e1c32aec2b0e7a2e550d475012ad141b38dc773d288506af2766cb7c3a85ad6ac8b6baa0e9604e8ba521ba1e86e7f0d8a1bd8c40265d05cd03c8548406785e28934685b15cb98ec06c0cb54b53d48d0c04d1b41d0ea97b36130d0ee00094b43d0e03403018a75b708a0a9180007c302286e0003c001aa58ec304992587e3b0110c02c070e83282e670e2164f3bb88670c96759b64796e400da1e4405e5f403278ce5de9e74cb32140b12c66000babe70cea199968a4502193c000f2d09a0701203c2f4148a03c0f030052d8b1566400f4395627e464594b5794159b255012d5f54a04d6756d7b5d96e5f965a010a02825acd90de36653018dad4f09374db3734f36b58b72d796add8a5a280c5ca81548052934009a300005abd0000a5b5e5fe635564d923565af505715b9e1648227128e6c2f0870197b54b675b14083f5c511568ba0e931af9d9015ca920c579dfd435cd42d60eedf95207025abd25a0820dd8f6d191359f7bd4b67d90eb9ee4c3914a4fd3b0952f908015003881554e05235f36f4d06a5d00c169001888043a427a419e8319a647d815d90e539c1633020456634b52283c6005367d3ec3439af33810847ae5374fab61533592b3950c5ca0c0510c471024d83ae3166e7930a3b812583ee690c0b21e2da1800ec4089112909601e3a534d5bcafabcecbcccbbc0469c1e25b60f83e357322642f2239f0330bc115280159563d89e8dc3615c54c048004080d78b5652f7f33b67742ee3d6f7d1ac70114c75090308bb039e5310fabbf5c3ec352b4a42ee0c03212a909b92a392f3cd274948317e633ab07755c5c2a9464c00001b1fba0c0000932873c2fbbf2f2009877f2807e87d7e70ee05fcbe35b5d05b04401fdca1b285b6a6dedb45430d3972ae27c42513b1c777009ddb9e72c446cdcb3b0e0c394b1686003180c3346ce865b10c03bad70ab9a00a468ce00a00086dd73ba0bca9b0501c072a874603622e6d882aa30d1a3dd8073d6a6e65045f91161a5180c06543c9f93440b07ec8a180596e7dc218b2608a3c0370708ea0c02c84a8a181b9a01e0281951132ae98c5020619c10179147180215168e8f6a708af1a0bd106312118980969b10f0000d281832096080d212c3382510602f8207546cc603848803485d9aa290ce44d0870315006298b3f6620a92a4f14e13a2010878300e089a710301b2380614652a92645989600534469cea9f31ef1806016a54402849338048180d09d52904b0300001ba173d1850b804cd6030000239527d1e32e0aea700da0a93b04a900114a9344459ec1c6658099520660c04a8c70050c0100510400c5599991d81523a8f20ca4cc580a1d2c01cd804f32a7c0c59cb3ea087600c0069040522b03e09714a9d49e0ac80690439a4c2e59600b46143000422222a580601a225818a9612a351288621753e4c495c06e5144a9d90f65704592d3714405193920a1e4d4900b2a0c0794b20c65c2785ec1740712e082b49502b0e548e23883a03c0b88ba254d103d2686961b12c254d9531044abb25579995624c84872382f488031549468100faa642b4a90ed32a52c050ba1524687c95c53a7b00393153e77ce7225d66282ca8e0b946c818ad51870b4e651f33274e7c91a1a23aa92e7104a658785bab9d548575baa2671a50552b6aa2a6006ea0b691050f128373ccd9765716905756338e1e62d0032eea942051a0840d431067252274ad1d50fc212d75ceb581f2bd1520ed44247521dcb61c8f48ec567404b0d5b581248f44e400159717cc2b3580c51104a864148749958222874e0ce5642c6912f1a9c902c955000f42c2e01105258e980baa2e50f428872a948018592ae21728605100c46c249d508792ce3d9d21750818aa8b944300d9872c01fef8584b89759260e93f458871017c750641902600d462ce0512624c82e50929253efd4a9223464b10d9334ae4a80f924394458da1263194bc4033aa57482d4f211534bc55c1da7b4d83dd3e62b1ae5fd32a50ca9023256574a992d21e672add6b21e26c9d974a0e51c939673df55cefdf7356511e79c9a7e7bc90e789bd6fcae176696651a0d20ac144285050a229e6b85c26916d514568bea262ec550799412a25908496c05055202975cdb934ae942ce4b4ca59731b65ac639739ee5330f9641d15c2aca6e8580e2b7624ad90d2a6806af95dab0e79a850aabd55caad58ab0e6a68b59b2ad51ad6326aca6c073596b0e789f5463a1d4cb34daeaba47adb35f336468a727ebdcd0690df21a65a4c8da4ab2e71abd301137d464dafa06cbaae099bd83668abbfa3161690e1094b64ec4395a174d6bad5001b654a6d2005b5b699077a055f86edca37b7f6ae083b874d431ba2a0a54e9f5b3a267cec5dcba4bbaee80200b74eead5fbb0f4dc93d5c1c145eb00bb66f6b03bdf314f4d1d1b3009611df39c71fa75904bd4a7cffead3407fea81dc7107e155698380eb4e3de43be6d0d458c31b618c4819525cc1fd41a85a63d0029c5d07eec4c953f20e3405ae5b5a975bdd79427aa3e49694264c01e8784d37350a2723cbf2fc2fd707ab81c262bfd3dd24e82894f953e4e4c268d8eee88858eb2674fcd4726721cc2b3625db9ee7b7d6edeba91284b5f493fbdd64b8264ae204a9cbeddc536e741e8f39b98edfddaa3950fe6170852b8163bcd35a51edf28ad7f5b5e48cba44a8692adf0e02aabdf9d137b7626ced15b01e1e144475cbaa040705e72f25705d7ef23ef369aff4f07dedbf6aebe1626d75807097b3ca39178b061bf94e7966bca5dc6b73c1bef3eee6608cacbd72a408ec35e56e22dd8509eb6014470e8aae3ed1b89836bae1cbe5c1e3edc10e00840807d35cc5775496436bb5791747827fa4e07d314c5222880196a73836057f540d33d0274a972338942f6495a33176c37f75650504bf4294e31296d01e30a91802b23197d15750a502158d7f77e91a75bd7bd53d040855560ad249b19949935764f6cf60d1f5272680c008506008ad2c55191eb460ac328d4e566b4d505511f4391f73f76a0e7f64d59d57977d7a74391474dd1434a85002906a2420cc97933cf16959878f52702153d2656dd7eb4d044d22e5807c93d117d2f51cb6db3b088449302d7ef67b25d2e57540215874b0b8362f2e90853e54337857e0da778268818a1e91937c0f5433d3a830d3eb3821d82232543750392ab7b52871806e0a40a835202101bb0a75493034e02e753512b6551b57850d30b31790197f91cb63718c3377850089157a9488d197a083d54f20f5901ff39f495249098870ce0ef33ba000d80e9090f0e04b0628a725ef10e1a27a92374696696f30a889d56d76d3fb2bf1bf57d6bf51095d56775f10321f71f78f7fd730cb0dff398e452e57351b5428769158f9824f587608977604a232b932f4f0a3b5fd3852e5278d90b790b5388b906515849b31c90572dd13427f329130130504cbf6849697a86242c52e50130fb36d0f42f310e69c60b38450b5991a0ec412f651130500c8f00f5f3790beb530af889b5fb4b02490ff2e53885893150882bb22d2735253c45de34762d7600848e0d04d3d4a85190a4a8b2495991a51a902d205554cd01fb0ed14d07895e2107005052e035f6032c8dd54d0c8443d366150dab36b0e8b0d604a886591f89ff6394844ed224924fc94a90b2058f08dcf56f4d013b18a2b77e53e7448e0cacf7037145108748df60505f1fd1801c0ca30d04492e5468ab0c63397163363720e296e37290971a065419847d08f6ad64f5194f325d3eb07944cc8352cea8f497a817d364eb379010d3a779d439785144d1cb594a80b927d18017483d3ef3ac844fbf14cd3978565f45f1152f0c44e14d1d72119f3e7144a60a29620e635c4ea858cf2c9ecae8e735df39b6590654a55b97bb19d5c893475b64d1cd4655a957968f6f324018b10039c9b93476d4ed0fb9134398c849c8bf4ae574d3bd2493845db0dcb3950030285c8ec9988790049f4f82bd9548ab915d35ce5943f5eb7b89cf5797c76b2783502f9cbb92ef22c75b25cf49402d9b6f92275984953b09876d4d35580624aad5756fd0ef6653c74724a946ce773bce78c74be92af5832d17c29b7498a8ca4959808ce39060ae06e4aa402156cbdb05d48434707734b5cb5e57e5682e0f2a8b881e0b0b519428dd8ad524b16937d71ccfd05f63504cbcb24cb3c960b8cf4d08a3c33416981b9032a807b110a54a45a3240c86710c85715447c36300f14310ae1f13f17f15442094884e03090895dc6896ef78922cea314932c8bcc804ac8290e31acd2955caa9234ba971296911b0e90131766933e9680793619752d5775b7531cb0790431d31805d97d90ad7429b74b91695334d31e8ab33795793f0d250737e8c055737408f3000e856677856e4c453c53f8be774510b0d847288b74352558b78b6fd372fa554b3c50acccb3630d3392d0f677038b2b0d929550aa6142362307d32352abc0d2cfa3220a631aaf7abaaa292e346ade3434aea93893a892eb50930689ead933eac1901ae53112210cd30d331af5909aa9aad883354ce2285adb933339965ac9f35a8549f92a447c8d3134b7300d3daaf3322b6ab3ad408ba964abab4b1ba9173baf25512c4b2a964b17cc72b7ad208fa9cb2faa1530f5fae5109529519516b350a5506b7fa3555e05d6bab1a72ff0356f2deb412bd56ff4c6ca70b889b13b528cd94f5566b10b40e5b10e55b7c8aaae8d0b0f570b73db4694cf336a76b3b0bb5cd6a46bb2ead34934987612de4daf1d746d63cab8dfb4ed007540e074a801d49570743c876e8747b19d333047458a44e470dd3475990c73dd574a601c721e4c0ba2a276510d487d6c882eb6ed8003089cc673ccd851672ccd78dcf74cc831e7652fa2ed32431437892df68b2aaaab40ee9711d0acdc49e7657410e9933aa4e86d56adb74377a9418d373855db39283efb77d8b56e77500db56910f70bf6f74c77aed8340f00cc7722b63d58d56c98a0e2d8f2e576eb0494f3eb0770cf43b6bc9cf0be82f72aa2f2e14e4f70d984f0caf0b565757b3de86f2d566f18c9cf532bd2d38cef094b68d25508f9f61f51f60190e11c94eafb59f32ee8c814c6495f7b4f0036711ee176df1c347327cae503f48ad750bee9287eaf75497543b8ad6adca08ca1eead7f11f77f52af36ab500cfff180a00900c8a9c8880a2d01b0d8d518ad7ece40e51540a5b1e6e515a2cbd7ccf06981ceeaaa9868f4386f63046ca0ed0ed2fa09cebc72e2660fc4b292d25d576eae0fb2a40d353e0a76957226f5b081c78a971d1a90fd3144861a86a5087ce36d50d36b629f95e36eafd1024deeaf2e30b47214f544b0849ce1e845b089f02d401e70e88570b350f09b36f0cab2a720d3df2e551887f3549bb121f2eabf28899d188f00744848a0ccdca0afe1f9abeb4c88aa820f053c8e995351d8bd8e76ad9406dce70aac502868ad8ab067706182d98f05a07505fb6f09327f26fe3495b0740000226c46204b9abf3a299c7f62b9809d0973d7603b9e081980d04c141e78a2b849e25a1d21960011da5010665fa06046b280005a5643619e2666e46143914144d1300046078185fd661a772545f1074af707e15c63113410362fa3015fa68209e5ae24e38581e0a58c21f26a5d1a305e367017a593c33c18a7658e02058e95fa0e25eb33c5412615c669e3a5a664a5d827825f2015ae2425915a012659a5b2586608121e710495e382e58958c25e5e15915a9e5ca1f9ee5d3c000df203979d700795a61455b416559f9b55cf24d5d70935bd5cc5d15a35f85d36495b35c32606d5e07d6b5dce5b5835d85955d65c7588a675ed5ef5dd5ac22907d5d0de616359d58e5df5b59c8a88020da2591103590d9159c59144271b13b17106a80d045045012db9663244adce239ebf139a4db0d9805e476066037212df1038465e2f5f55ca5c65bb5e0d965d0a135ce5a3608a595ee263844de6d96dbeda758c2295d60775d0dd259f9e7657615c0f62487f060e1f66dc4893dc32812121da4db321e03192a09104ec2b9e626700f9c6c3bd9622804b9a55b9da5a6543c86000e015e2b9f8c57ddd43f02b9f2007ddd40edcb9d03c03e8052836dab9840be43b9e24f823722c07945103002c07fe77df3dc6a4bded01c3b5de1a6466ae72627a0fd8115cd8a3ac5f1a5542251c112e5200f66f12a172e46e2262c661a33de0de258a3fcdb9df5d85da8da5de3855d9b591ddf9e13b4de95c239b5b15b0154e1f47c27f46f853dea3f6a0fe7745e43c5ec31d9f5384aac00001d300633ac3ee39b5b23d93e0dec5aed90942aff6025cb3f33ca3aee3e3de38fdc13f15d8d8e5d13ab3fb5a138d5a5ddf5e738f5d6a4d3db17107f591207d473ae3f53fe3e6d84bf3d893b1ddf390bfd614bd4d98260bfd3c302ed8cd8d9b2df3d4ad82ba801ada6ddcbe4db6d8ed87e5287598901edc325ab88a8281d383158b9c67d39521523d3ea3a4bb5df73dc3aa3835916035d525eb9cdd73973dee51a4961d6180105ca646a6fe11a11677075275166a82d4c07d273e45625a6a97f57fa1a633219124581405122d85b81646a43b9a463be167520083900283ba6c871648bad548445033243bebb91620000)
**Expected behavior**
Text is contained within its parent cell.
**Screenshots**


**Desktop (please complete the following information):**
- OS: Windows
- Browser: chrome
- React-pdf version: 3.4.4
Contributor guide
Assessment
This issue has not been assessed yet.