计算器屏幕上的大数字扩大了边界

Question

我在 create-react-app 中创建了一个计算器，但我遇到了数字从屏幕流出的问题。

例如，当您输入 11111111111111111111111111111111 时，数字将在计算器输出之外继续。我希望大量缩小并包含在空间内。如何做到这一点？

我尝试将https://github.com/kennethormandy/react-fittext 实现为依赖项，但它似乎只会使我的数字变小。即使实现了这一点，数字仍然会继续显示在屏幕之外。我已经包含了该项目的当前沙盒版本，以便您可以看到我所指的内容。 https://codesandbox.io/s/silly-haslett-8vf8s

你可以找到我在输出显示组件中使用上述依赖的地方。

这是我用来设置计算器输出样式的 CSS

.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;
      }

这是有问题的组件类。

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

您应该使用 CSS word-wrap: normal 并根据您的需要定义计算器屏幕（输出）窗口的大小。

Answer 2

您可以隐藏溢出的文本并将文本方向设置为rtl：

#answer {
  overflow: hidden;

  > div {
    direction: rtl;
  }
}

带断线：

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