我已经在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;
}