Как сделать, что бы шрифт подстраивался под размер блока?

#javascript #html #jquery #css #svg

Есть небольшой блок, у которого есть динамический контент. Проблема в том, что блок
строго фиксированный, и текст не всегда хорошо выглядит. Как можно сделать, что бы
шрифт уменьшался, если контент не помещается в блок? Думал сделать SVG, но текст там
тоже имеет строго фиксированный размер. Насколько я понял, такое можно сделать еще
с помощью canvas?
    

Ответы

Ответ 1

Как вариант считать кол-во символов и в зависимости от этого задавать размер шрифта,
вывести примерную формулу для своих размера блока и шрифта, как пример, для блока 200
на 200 и здешнего шрифта примерно такая.



var textLength;
$('.content').each(function( index ) {
  textLength = $(this).text().length;
  $(this).css('font-size', Math.sqrt(75400/textLength) + 'px');
});
.content{
  width: 200px;
  height: 200px;
  border: 1px solid;
  margin-bottom: 20px;
}


I have related the substance of several conversations I had with my master during
the greatest part of the time I had the honour to be in his service; but have, indeed,
for brevity sake, omitted much more than is here set down.	


I have related the substance of several conversations I had with my master during
the greatest part of the time I had the honour.


I have related the substance of several conversations I had with my master during
the greatest part of the time I had the honour to be in his service; but have, indeed,
for brevity sake, omitted much more than is here set down.	They made signs for me to
come down from the rock, and go towards the shore, which I accordingly did; and the
flying island being raised to a convenient height, the verge directly over me, a chain
was let down from the lowest gallery, with a seat fastened to the bottom, to which
I fixed myself, and was drawn up by.



Ответ 2

Один из ваиантов использовать @media запросы. 
Нажмите (https://www.w3schools.com/cssref/css3_pr_mediaquery.asp)


Ответ 3

Такую задачу можно решить с помощью метода Element.getBoundingClientRect()

Приведу простой пример:



const parent = document.getElementById('parent')
const content = document.getElementById('content')
const textarea = document.getElementById('textarea')
const submit = document.getElementById('submit')

// Получаем исходный размер шрифта
const originFontSize = parseInt(getComputedStyle(content, null).getPropertyValue('font-size'))

submit.addEventListener('click', () => {
  content.innerHTML = textarea.value
  calc()
})

calc()

function calc() {
  const parentRect = parent.getBoundingClientRect()
  let contentRect = content.getBoundingClientRect()
  let fontSize = originFontSize

  content.style.fontSize = fontSize + 'px'

  while (parentRect.height < contentRect.height) {
    content.style.fontSize = --fontSize + 'px'
    contentRect = content.getBoundingClientRect()
  }
}
#parent {
  height: 200px;
  width: 400px;
  background: #ccc;
  margin-bottom: 20px;
}

#content {
  font-size: 35px;
}

#textarea {
  height: 100px;
  width: 400px;
}

  

    Но стремящиеся вытеснить традиционное производство, нанотехнологии подвергнуты
целой серии независимых исследований.