Как уменьшить многострочный текст, используя что-то типа zoom?

Question

[Евгений Коелсник]

Суть задачи сделать резиновую страничку, которая при уменьшении экрана будет так же ровно уменьшаться, как она есть в дефолтном размере. Данная страница многоязычная и по сравнению с русским или английским текстом, немецкий просто огромен.
Суть проблемы в том, что у меня есть блок с фиксированными размерами в процентах, допустим 6% от высоты и 30% от ширины. В этом блоке находится текстовый контейнер, допустим <p></p>. В этом контейнере находится многострочный текст, который заполняет весь контейнер. При смене языка текст переводится в реальном времени и в немецком переводе он становится длиньше.
Вопрос такой, как сделать так, чтобы текст уменьшался за счет zoom или font-size или еще какого-нибудь параметра? Так же стоит учесть то, что текст не должен разделяться с помощью<br/>
Использовал уже

• ReactFitText
  
• FitText
  
• Fitty
  

Comments

[Евгений Коелсник]

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

[Александр Епихин]

Уберите мета-тег:

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Comments

[Евгений Коелсник]

Не работает

[Евгений Коелсник]

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

[Александр Епихин]

Попробуйте задавать все значения в vw