Calculator screen filled with numbers overflowing beyond its boundaries

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;

Answer №1

To conceal text that exceeds the boundaries and change the text direction to rtl:

#response {
  overflow: hidden;

  > div {
    direction: rtl;
  }
}

Utilizing a breaking string:

#response {
    width: 100%;
    display: block;
    word-wrap: break-word;
    white-space: normal;
}

Answer №2

To ensure proper formatting, implement CSS word-wrap: normal and specify the dimensions of the calculator display window based on your requirements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve the value of a CSS class property regardless of whether it is actively being utilized

I am facing a dilemma where I need to determine the value of the 'width' property for a css class named 'foo' (example: ".foo { width:200px}" ). However, there may not be an element with this class in the dom yet. My goal is to retrie ...

What are some ways to troubleshoot the TypeScript React demonstration application in Chrome?

Debugging a TypeScript app in the Chrome debugger is a straightforward process. First, you need to configure the tsconfig.json file: "sourceMap": true, Next, install ts-node and set a breakpoint in your TypeScript code using "debugger;" ...

How to make browsers refresh cached images

.button { background: url(../Images/button.png); } Issue: To improve performance, static content on the website is cached with expiration headers. However, when an image changes, users must manually refresh their browser cache (Ctrl+F5 in IE). ...

I am encountering a CORS error when trying to fetch data from the MongoDB Atlas Data API. What might be the reason for

please provide proper image description I am encountering a CORS error when trying to fetch data from the MongoDB Atlas API. Interestingly, the request works without any issue in Postman and Thunderclient. ...

If the user decides to change their answer, the current line between the two DIVs will be removed

After clicking on two DIVs, I created two lines. Now, I am facing an issue with resetting the unwanted line when changing my answer. To reset the line, you can refer to the code snippet below: var lastSelection; ...

What method can I use to adjust the font style when it overlays an image?

Sorry if this is a bit unclear, but I'm trying to figure out how to change only a section of my font when it overlaps with an image while scrolling. If you visit this example website, you'll see what I'm referring to: For a visual represen ...

Sorting in reverse order within a table

Is there a way to reverse the order in which my function renders table rows with incremental id? (first row with id=n, last with 1) Here is the code snippet I am using: renderRows = () => { const { receipts } = this.props const reversedReceipt ...

Is it possible to continuously increase the value of a CSS property with each click?

I am trying to implement a feature where the value of an element decreases each time a different element is clicked. Currently, I have the following code: $("#trigger_heritage").click(function () { $(".heritage_content ul").css("margin-left", + -880); ...

Encountering errors while trying to execute "npm run build" in React Hook

Currently, I am using NextJS 14 for my project. The issue arises in the python-course/page.tsx file when I run 'npm run build' command. I encounter an error on this page. Here is a snippet of my package.json: { "name": "frontend", "version": ...

The novice image slideshow script in JavaScript is causing all images to disappear and generating errors

Trying to create a simple image slider that pulls information from various sources. CSS and HTML are set up properly, but adding the JavaScript logic causes all images to disappear. The console displays an error saying "Uncaught TypeError: Cannot read prop ...

Unusual default Nav bar positioning

When attempting to create a navbar, I encountered small gaps that seemed impossible to close. Adjusting margins only resulted in new gaps appearing on the opposite side. Even when trying to find a compromise, I ended up with gaps on both sides instead. It ...

Automatically resizing font to fit the space available

I am attempting to achieve the task described in the title. I have learned that font-size can be set as a percentage. Naturally, I assumed that setting font-size: 100%; would work, but unfortunately it did not. For reference, here is an example: http://js ...

Using `useState()` to handle conditional styling

As a newcomer to the world of React, I am currently working on a project where I need to change the theme of a single Footer component based on certain conditions. Below are the two themes that I want to display: Theme 1 Theme 2 function Footer({ theme ...

The hamburger menu on the navigation bar only functions the first time it is clicked

I've encountered an issue with my hidden menu nav bar. The hamburger and close buttons only work once. Should I organize the events within a function and call it at the end, or perhaps use a loop for the button events? It's worth noting that I d ...

Guide to making a progress bar in Next.js

My goal is to have a Progress Bar displayed at the top of my website that fills up each time the page is loaded. I am currently working on implementing this feature in Next.js, but I am facing some challenges. Many available libraries for loading bars requ ...

One solution for executing an action on a button click within a component, despite using the connect function that is not triggering in React Redux

Struggling with using the postMessage() click event to send a callback to action/reducer in React Redux. Any guidance for this newbie would be greatly appreciated. Thanks in advance! import React, { Component, PropTypes } from 'react'; import { ...

NextJS is not displaying data fetched from getStaticProps on the page, although it is present in the props

I'm facing an issue with NextJS when trying to display text fetched from my API call. Essentially, I send an external HTTP request to retrieve some sample data. The data is returned as props for the component using the getStaticProps method. Within my ...

Excessive content within the div element causing overflow

In my Laravel project, I am facing an issue with the patient history form. The content overflows under a div as shown in the image below. View first image To address this problem, I tried using overflow:hidden in the CSS section. However, this caused my ...

The ClerkProvider service is currently experiencing issues, leading to the blockage of third-party cookies

While implementing ClerkProvider in my Next JS project, I have encountered an issue. Despite wrapping my layout.js file in the provider, there seems to be no change. Ideally, when accessing a private route, it should prompt for authentication after redirec ...

``There seems to be a problem with the radio buttons where the selection disappears when

I'm facing an issue with a radio button group I created. It's functioning properly, but the selection disappears when clicked outside of the radio button. Can someone assist me in resolving this problem? Here is the link to the jsfiddle for refer ...