Размер текста относительно ширины блока

#css

Есть заголовок внутри адаптивного блока.

Необходимо чтобы сам текст занимал свободное пространство родительского блока по
ширине и соответственно увеличивался и уменьшался в размерах.


 
Заголовок


    

Ответы

Ответ 1

Вариант на CSS.

vw - еденица измерения, равная проценту ширины документа:



div{   
    font-size: 8.1vw;
    white-space: nowrap;
}
Некоторый тестовый текст




Он довольно неточен, поэтому я поставил  white-space: nowrap;

Вариант с масштабированием.

Блок с текстом масштабируется с помощью JS и CSS transform



function fillDiv(div, proportional) {

  var div=$('#test')
  var currentHeight = div.outerHeight();
  var currentWidth = div.outerWidth()+3;
  var availableHeight = window.innerHeight;
  var availableWidth = window.innerWidth;

  var scale = availableWidth / currentWidth;

  div.css({
    "left": "0px",
    "top": "0px",
    "transform": "scale3d("  + scale + ", " + scale + ", 1)",
    "transform-origin": "0 0"
  });
}
fillDiv();
$( window ).resize(fillDiv)
#test{
    position:absolute;
}

Некоторый тестовый текст




Стырено и адаптировано из amazon


Ответ 2

Обернём текст инлайн-элементом (в нашем случае это ) для того, чтобы вычислять
ширину текста. Добавим для этого элемента свойство white-space: nowrap — так при инкрементальном
увеличении текст не перенесется на другую строку и высчитываемая ширина не изменится.
Проверяем что больше — ширина страницы или ширина текста. Если текст больше, то в
цикле уменьшаем его до тех пор, пока он не станет меньше. Если текст меньше, то в цикле
увеличиваем его. Если в каком-либо из этих циклов произошел перебор с увеличением или
уменьшением, то откатываем изменения назад и выходим из цикла.
Навешиваем на событие resize исполнение этой функции. Чтобы она не вызывалась при
каждом событии и чтобы не сильно нагружать браузер, добавим функцию debounce() — так
она вызовется один раз спустя 250 мс после окончания события.


P.S. пример не слишком хорош, потому что будет слишком часто дергаться DOM и начинаться
перерисовка страницы, так что рекомендую подумать над тем, чтобы его улучшить :-)



start();

window.addEventListener('resize', debounce(start, 250));

function getCurrentFz(selector) {
  let style = window.getComputedStyle(selector, null).getPropertyValue('font-size'),
    fontSize = parseFloat(style)

  return fontSize;
};

function debounce(func, wait, immediate) {
  let timeout;
  return function() {
    let context = this,
      args = arguments,
      later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    },
    callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

function start() {
  let body = document.body,
    bodyWidth = body.getBoundingClientRect().width,
    selectorInner = document.querySelector('h1 span'),
    fz = getCurrentFz(selectorInner);


  if (bodyWidth > selectorInner.offsetWidth) {
    while (bodyWidth > selectorInner.offsetWidth) {
      fz += 1;
      selectorInner.style.fontSize = fz + 'px';

      if (bodyWidth < selectorInner.offsetWidth) {
        selectorInner.style.fontSize = fz - 1 + 'px';
        break;
      }
    }
  } else {
    while (bodyWidth < selectorInner.offsetWidth) {
      fz -= 1;
      selectorInner.style.fontSize = fz + 'px';

      if (bodyWidth > selectorInner.offsetWidth) {
        selectorInner.style.fontSize = fz + 1 + 'px';
        break;
      }
    }
  }
};
h1 {
  margin: 0;
}

h1 span {
  white-space: nowrap;
}
Some text in header


Ответ 3

Используйте относительные единицы rem, em. Еще можно использовать vw, вот стаття
с ришением похожей проблемы как у вас. Статья


Ответ 4

Например вот так:



$('.jsFontSize').each(function(){
  var fontSize = 14;
  var rowHeight = $(this).height();
  while(rowHeight>20){
      fontSize=fontSize-1;
      $(this).css({fontSize: fontSize+'px'});
      rowHeight = $(this).height();
  }
});
.wrapper {
  font-size: 14px;
  min-height: 20px;
  line-height: 20px;
}
.jsFontSize {
  display: inline-block;
}




  

    Текст текст текст текст текст текст
  



  

    Текст текст текст текст текст текст
    Текст текст текст текст текст текст
    Текст текст текст текст текст текст
    Текст текст текст текст текст текст
    Текст текст текст текст текст текст