Как рассчитать размер шрифта, чтобы соответствовать контейнеру? - PullRequest
Новая
       27

Как рассчитать размер шрифта, чтобы соответствовать контейнеру?

0 голосов
/ 20 июня 2019

Мне нужно поместить переменные объемы текста в прямоугольные делители переменных размеров, которые сами по себе являются адаптивными (используя vw / vh).

Существуют сотни div, которые имеют разный размер, и я не знаю этого заранее: он рассчитывается по исходным размерам в сантиметрах, чтобы сохранить соотношение сторон.Каждый div имеет текст внутри, который должен соответствовать контейнеру (не идеально, просто без переполнения).Обычно текст переполняется, но у меня не может быть полосы прокрутки, текст должен соответствовать контейнеру.

Несколько вещей, которые нужно иметь в виду:

  • divсоотношение сторон должно быть сохранено
  • должны быть сохранены разрывы строк текста
  • не имеет значения, является ли текст слишком маленьким, чтобы его можно было прочитать

Пока яМы пытались адаптировать размер шрифта с единицами просмотра.Проблема в том, что размер шрифта будет отличаться для каждого div.Мне нужно какое-то уравнение для расчета размера шрифта на основе объема текста и / или размера контейнера.

Вот несколько примеров: https://codepen.io/gramm/pen/VJPavg

div#tm12901 {
  width: 15.952380952380954vh;
  height: 50vh;
  font-size: 0.8vh;
  line-height: 1.5;
  background: Pink;
}

I 'Мы также пытались обнаружить переполнение, но пока безуспешно (это, вероятно, легко сделать, и у меня просто нет знания js).

Другой пример: https://codepen.io/gramm/pen/MMJpdb

//trying to detect overflow
$('.text').each(function(){
  if($(this).clientHeight < $(this).scrollHeight){
    console.log('overflow detected!');
  }
});

Есть ли лучший метод: рассчитать размер шрифта или обнаружить переполнение?И есть ли у вас какие-либо указатели, чтобы помочь с любым методом?

Для метода обнаружения переполнения, будет ли проблемой то, что div будет менять размер при каждом изменении размера окна?

...