I'm encountering an issue with my calculator created in create-react-app where the numbers are overflowing off the screen. Specifically, when inputting very large numbers like 11111111111111111111111111111111, they exceed the output container. I am looking for a solution to make these large numbers shrink and fit within the available space. How can this be achieved?
Although I tried using https://github.com/kennethormandy/react-fittext as a dependency, it only seems to reduce the size of the numbers but doesn't prevent them from overflowing the screen. To give you a better understanding of the issue, I have provided a sandbox version of the project here: https://codesandbox.io/s/silly-haslett-8vf8s
You can observe where I implemented the above dependency in the output display component.
Below is the CSS snippet used to style the calculator output:
.output {
grid-column-start: span 4;
color: $white;
display: flex;
justify-content: flex-end;
align-items: center;
word-wrap: break-word;
}
#answer{
margin-right: 12px;
font-size: 5vh;
font-family: 'Lexend Tera', sans-serif;
}
This is the relevant component class:
import React from 'react';
import FitText from '@kennethormandy/react-fittext'
class OutputDisplay extends React.Component{
render(props){
return <p className='output'><span id='answer'><FitText compressor={0.1}>{this.props.placeThisOnScreen}</FitText></span></p>
}
}
export default OutputDisplay;