如何使用縮放之類的方法減少多行文本？

Question

is to make a rubber page, which will decrease as much as the screen shrinks as it is in default size.是制作一個橡皮頁，它會隨着屏幕縮小到默認大小而減小。 此頁面是多語言的，與俄語或英語文本相比，德語簡直是巨大的。

is that I have a block with fixed sizes in percent, let's say 6% of height and 30% of width.是我有一個固定大小百分比的塊，比如說高度的6%和寬度的30% 。 這個塊包含一個文本容器，比如<p> </p> 。 此容器包含填充整個容器的多行文本。 更改語言時，文本會實時翻譯，而德語翻譯會變長。 such as how to make the text smaller due to zoom or font-size or some other parameter?諸如如何因zoom或font-size或其他參數而使文本變小的？ 同樣值得考慮的是，文本不應使用<br/> Использовал уже 分隔

• ReactFitText
• 適合文本
• 菲蒂

import React from 'react';
import ratioFrame from '../../components/ratioFrame';
import withLocale from '../../modules/translate/withLocale';

class PageBFE extends React.Component {

  render() {
    const { size, translate, formatText } = this.props;
    return (
      <>
        <div className="content bgPage2" style={size}>
            <div style={{ fontSize: formatText(5.55) }} className="text-title">{translate('presentation1.page2.text1')}</div>
          <ul className="text-box-content2  liStyle" style={{ fontSize: formatText(3.41) }}>
            <li>{translate('presentation1.page2.text2')}</li>
            <li>{translate('presentation1.page2.text3')}</li>
            <li>{translate('presentation1.page2.text4')}</li>
            <li>{translate('presentation1.page2.text5')}</li>
            <li>{translate('presentation1.page2.text6')}</li>
            <li>{translate('presentation1.page2.text7')}</li>
          </ul>
        </div>
      </>
    );
  }
}

export default withLocale(ratioFrame(PageBFE));

size - 所有內容所在區域的大小

FormatText - vh 或 vw 中相對於屏幕的文本大小

.text-title {
  margin: 5.8% 5.6% 0 5.6%;
  width: 88.8%;
  background: blue;
  font-weight: bold;
  height: 6.315%;
  max-height: 6.315%;
}

Answer 1

一種可能的解決方案是獲取屏幕的尺寸，然后使用scale css function基於數學運算來設置比例值

Answer 2

import React from 'react';

class SizeText extends React.Component {
  state={
    zoom: 1
  }
  componentDidUpdate() {
    const box1 = this.element1.offsetHeight;
    const box2 = this.element2.offsetHeight;
    const zoom = box1 / box2;
    this.setState(zoom)
  }

  render() {
    const { content, className1, className2, formatText } = this.props;
    const { zoom } = this.state;
    return (
      <div
        ref={(element) => {
          this.element1 = element;
        }}
        className={className1}
        style={{ fontSize: formatText(5.55) }}
      >
        <div
          ref={(element) => {
            this.element2 = element;
          }}
          style={{zoom: zoom}}
          className={className2}
        >
          {content}
        </div>
      </div>
    );
  }
}

export default SizeText;

內容 - 文字

className1 - Class 用於父塊

className2 - 子塊的 Class

formatText - vh/vw 中的文本大小（字體大小）相對較小