我已经在create-react-app中创建了一个计算器,但屏幕上出现的数字有问题。

例如,当您键入11111111111111111111111111111111111时,数字将继续在计算器输出之外。我希望大量人员缩小并把自己包含在空间中。如何做到这一点?

我尝试将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;

最佳答案

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

#answer {
  overflow: hidden;

  > div {
    direction: rtl;
  }
}

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

10-07 19:04
查看更多