CODEWITHSUNDEEP
reactjs
kojow7
kojow7

Reputation: 11424

react-textfit not fitting text correctly in multi mode

I am trying to use the react-textfit module with multi-line support. However, my text is overflowing the parent div rather than fitting neatly inside.

An excerpt of my code:

return(
    <div style={{margin: '10px', border: 'solid black 2px', width: '200px', height: '80px'}}>
        <Textfit mode="multi">
            The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.
        </Textfit>
    </div>
)

What I am seeing:

enter image description here

The text does auto-fit for single mode and shows correctly on a single line. However, when I switch it to multi mode, it is behaving as if I am not even using the <Textfit> module.

Additional note: while the above text is hard-coded, the actual text will be dynamically pulled from a database.

Question:

What am I doing wrong? How can I fix this so that the text fits inside of the div container?

Upvotes: 0

Views: 2052

Answers (2)

JossFD
JossFD

Reputation: 2216

You can either make the Textfit know the height of the parent div with: <Textfit mode="multi" style={{height: '100%'}}> or you can make the parent div a display: flex.

I'm not exactly sure of how Textfit works under the hood but this works fine in almost every scenarios.

Here's a small Stackblitz to illustrate.

Let me know if this doesn't do exactly what you want! :)

Upvotes: 1

Brad Ball
Brad Ball

Reputation: 619

If you are trying to fit it in a parent div, you need to tell the Textfit component how big the height is going to be. 

  return(
<div style={{margin: '10px', border: 'solid black 2px', width: '200px', height: '80px'}}>
    <Textfit mode="multi" style={{height: '80px'}}>
        The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.
    </Textfit>
</div>

)

Upvotes: 0

Related Questions