Large numbers on calculator screen expanding past boundaries - css

Question

I have created a calculator in create-react-app and I'm having an issue with the numbers flowing off the screen.
For example, when you type 11111111111111111111111111111111 the numbers will continue outside of the calculator output. I would like for the large numbers to shrink down and contain themselves within the space. How can this be achieved?
I have tried implementing https://github.com/kennethormandy/react-fittext as a dependency but it only appears to make my numbers smaller. The numbers still continue off the screen even with this implemented. I have included a current sandbox version of the project, so that you may see what I'm referring to. https://codesandbox.io/s/silly-haslett-8vf8s
You can find where I have used the above dependency in the output display component.
This is the CSS I use 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;
}
and this is the component class in question.
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;

Answer 1

You can hide overflowed text and set text direction to rtl:
#answer {
overflow: hidden;
> div {
direction: rtl;
}
}
With breaking string:
#answer {
width: 100%;
display: block;
word-wrap: break-word;
white-space: normal;
}

Answer 2

You should use CSS word-wrap: normal and define the size of the calculator screen (output) window according to your needs.