如何根据容器中的内容（数字和字符串）调整字体大小？答案

【问题标题】：How to adjust the font size based on the content (which is a number and string) in a container?如何根据容器中的内容（数字和字符串）调整字体大小？
【发布时间】：2020-05-15 09:43:31
【问题描述】：

我有一个容纳金额和货币的容器。随着数量变大并接近正确的填充（即 16 像素），字体大小应该会减小。同时货币的顶部填充也应该改变。

https://jsfiddle.net/jmjjeena/uzsL7n0c/

//////////////// REACT /////////////////

class FontSize extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  render() {
    return (
        <div className='container'>
          <div className='subContainer'>
            <div className='amount'>$1000000000.00</div>
          <div className='currency'>USD</div>
          </div>
        </div>
    )
  }
}

ReactDOM.render(<FontSize />, document.querySelector("#app"))

//////////////// CSS /////////////////

body {
  background: white;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: white;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.container {
  background-color: white;
  box-sizing: border-box;
  border: 1px solid red;
  border-radius: 5px;
  width: 316px;
  height: 81px;
}

.subContainer {
  display: flex;
  flex-direction: row;
  padding: 16px 16px 12px 28px;
}

.amount {
  font-style: normal;
  font-weight: 500;
  font-size: 32px;
  line-height: 40px;
  color: black;
  padding-right: 8px;
}

.currency {
   padding-top: 17px;
   font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 18px;
  color: black;
}

【问题讨论】：

stackoverflow.com/questions/56099198/…这个问题可能是相关的/帮助你
您需要一个自定义函数来根据字符串长度设置字体大小。这是一个基于您的小提琴的快速而肮脏的示例：jsfiddle.net/onfgpadv/1

标签： css reactjs fonts react-redux font-size

【解决方案1】：

您可以制作 css 动态，例如像这样：

<div style={fontStyle(1)} />


fontStyle= function(fontSze) {
   return {
     font-size:fontSze
   }
 }

您需要根据数量变化添加逻辑。您可以通过 props 更新变量并将更新它的逻辑放在 componentDidMount() 中

【讨论】：