Ответ 1

ОБНОВЛЕНИЕ: если контейнер не является телом CSS Tricks охватывает все ваши параметры в Подгонка текста к контейнеру.

Если контейнер является телом, то вы ищете длины в процентах от области просмотра:

Длина в процентах от области просмотра зависит от размера исходного содержащего блока. Когда высота или ширина исходного содержащего блока изменяется, они масштабируются соответственно. Однако если значение переполнения для корневого элемента равно auto, предполагается, что любые полосы прокрутки не существуют.

Значения:

• vw (% от ширины области просмотра)
• vh (% высоты окна просмотра)
• vi (1% от размера области просмотра в направлении встроенной оси корневого элемента)
• vb (1% от размера области просмотра в направлении оси блока корневых элементов)
• vmin (меньшее из vw или vh)
• vmax (больше или vw или vh)

1 v * равно 1% исходного содержащего блока.

Использование выглядит следующим образом:

p {
    font-size: 4vw;
}

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

Эти значения являются единицами размера, как и px или em, поэтому их можно использовать и для определения размера других элементов, таких как ширина, поле или отступ.

Поддержка браузеров довольно хорошая, но вам, вероятно, понадобится запасной вариант, например:

p {
    font-size: 16px;
    font-size: 4vw;
}

Ознакомьтесь со статистикой поддержки: http://caniuse.com/#feat=viewport-units.

Кроме того, ознакомьтесь с CSS-хитростями для более широкого взгляда: Viewport Sized Typography

Вот хорошая статья о настройке минимальных/максимальных размеров и осуществлении большего контроля над размерами: Точный контроль над отзывчивой типографикой

А вот статья о настройке размера с помощью calc(), чтобы текст заполнял область просмотра: http://codepen.io/CrocoDillon/pen/fBJxu

Также, пожалуйста, просмотрите эту статью, которая использует технику, названную "расплавленный отвод", чтобы также отрегулировать высоту линии. Расплавленный лидер в CSS

Ответ 2

Но что, если контейнер не является областью просмотра (телом)?

Этот вопрос задается в комментарии Алекса под принятым ответом.

Этот факт не означает, что vw не может быть использован в некоторой степени для размера этого контейнера. Теперь, чтобы увидеть какие-либо изменения, нужно предположить, что контейнер каким-то образом является гибким по размеру. Будь то прямой процент width или 100% минус поля. Дело становится "спорным", если контейнер всегда устанавливается, скажем, 200px широким. - то просто установить font-size, который работает для этой ширины

Пример 1

Однако, с контейнером с гибкой шириной, необходимо понимать, что каким-то образом контейнер по-прежнему измеряется за пределами области просмотра. Таким образом, речь идет о настройке параметра vw на основе этой разницы в процентах по размеру для окна просмотра, что означает учет размеров родительских оболочек. Возьмите этот пример:

div {
    width: 50%;
    border: 1px solid black;
    margin: 20px;
    font-size: 16px;
    /* 100 = viewport width, as 1vw = 1/100th of that
       So if the container is 50% of viewport (as here)
       then factor that into how you want it to size.
       Let say you like 5vw if it were the whole width,
       then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
    */
    font-size: 2.5vw;
}

Предполагая, что здесь div является дочерним для body, это 50% той ширины 100%, которая является размером области просмотра в этом базовом случае. По сути, вы хотите установить vw, который будет хорошо выглядеть для вас. Как вы можете видеть из моего комментария в приведенном выше контенте CSS, вы можете "обдумать" это математически относительно полного размера области просмотра, но вам не нужно этого делать. Текст будет "сгибаться" с контейнером, потому что контейнер сгибается с изменением размера области просмотра. ОБНОВЛЕНИЕ: здесь приведен пример двух контейнеров разного размера.

Пример 2

Вы можете помочь в определении размера области просмотра, форсируя вычисления, основанные на этом. Рассмотрите этот пример:

html {width: 100%;} /* Force 'html' to be viewport width */
body {width: 150%; } /* Overflow the body */

div {
    width: 50%;
    border: 1px solid black;
    margin: 20px;
    font-size: 16px;
    /* 100 = viewport width, as 1vw = 1/100th of that
       Here, the body is 150% of viewport, but the container is 50%
       of viewport, so both parents factor  into how you want it to size.
       Let say you like 5vw if it were the whole width,
       then for this container, size it at 3.75vw
       (5 * 1.5 [i.e. 150%]) * .5 [i.e. 50%]
    */
    font-size: 3.75vw;
}

Размер по-прежнему зависит от области просмотра, но по сути настраивается исходя из самого размера контейнера.

Если размер контейнера меняется динамически...

Если размер элемента контейнера заканчивался динамическим изменением его процентного отношения либо с помощью точек разрыва @media, либо с помощью JavaScript, то, какой бы ни была базовая "цель", потребуется пересчет, чтобы сохранить те же "отношения" для определения размера текста.

Возьмите пример № 1 выше. Если div был переключен на ширину 25% либо с помощью @media, либо с помощью JavaScript, то в то же время font-size необходимо будет откорректировать в медиа-запросе или с помощью JavaScript новые вычисления 5vw * .25 = 1.25., При этом размер текста будет таким же, как если бы "ширина" исходного контейнера 50% была уменьшена вдвое по сравнению с размером области просмотра, но теперь была уменьшена из-за изменения его собственного процентного вычисления.

Задача

При использовании функции CSS3 calc() стало бы трудно динамически настраиваться, поскольку в настоящее время эта функция не работает для целей font-size. Таким образом, вы не можете выполнить чистую настройку CSS 3, если ваша ширина меняется на calc(). Конечно, незначительной регулировки ширины полей может быть недостаточно, чтобы оправдать любое изменение в font-size, поэтому это может не иметь значения.

Ответ 3

Решение с SVG:

<div style="width: 60px;">  
  <svg width="100%" height="100%" viewBox="0 -200 1000 300"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text font-size="300" fill="black">Text</text>
  </svg>
</div>

https://jsfiddle.net/qc8ht5eb/

Решение с SVG и переносом текста с использованием foreignObject:

<svg viewBox="0 0 100 100">
  <foreignObject width="100%" height="100%">
    <h1>heading</h1>

    lorem ipsum dolor sit amet
  </foreignObject>
</svg> 

https://jsfiddle.net/2rp1q0sy/

Ответ 4

В одном из моих проектов я использую "смесь" между vw и vh, чтобы настроить размер шрифта в соответствии со своими потребностями, например:

font-size: calc(3vw + 3vh);

Я знаю, что это не отвечает на вопрос ОП, но, возможно, это может быть решением для кого-либо еще.

Ответ 5

В этом вопросе есть большая философия.

Самое простое, что можно сделать, - это задать определенный размер шрифта для тела (я рекомендую 10), и тогда все остальные элементы будут иметь свой шрифт в em или rem. Я дам вам пример, чтобы понять эти единицы. Em всегда относительно своего родителя:

body{font-size: 10px;}
.menu{font-size: 2em;} /* That means 2*10 pixels  = 20 pixels */
.menu li{font-size: 1.5em;} /* That means 1.5*20 pixels = 30 pixels */

Rem всегда относительно тела:

body{font-size: 10px;}
.menu{font-size: 2rem;} /* That means 2*10 pixels = 20 pixels */
.menu li{font-size: 1.5rem;} /* that means 1.5*10 pixels = 15 pixels */

А затем вы можете создать скрипт, который будет изменять размер шрифта относительно ширины вашего контейнера. Но это не то, что я бы порекомендовал. Потому что, например, в контейнере шириной 900 пикселей у вас будет элемент p с допустимым размером шрифта 12 пикселей. И по вашей идее это будет контейнер шириной 300 пикселей с размером шрифта 4 пикселя. Должен быть нижний предел.

Другие решения были бы с медиа-запросами, чтобы вы могли установить шрифт для различной ширины.

Но решения, которые я бы порекомендовал, заключается в использовании библиотеки JavaScript, которая поможет вам в этом. И fittext.js, который я нашел до сих пор.

Ответ 6

Решение Pure-CSS с calc(), единицами CSS и математикой

Это точно не то, что просит OP, но может сделать кого-то днем. Этот ответ нелегок и требует некоторых исследований со стороны разработчика.

Наконец-то я пришел, чтобы получить чистое CSS-решение для этого, используя calc() с разными юнитами. Вам понадобится некоторое базовое математическое понимание формул, чтобы выработать выражение для calc().

Когда я решил это, я должен был получить отзывчивый заголовок на всю ширину страницы с некоторыми дополнениями в DOM. Я буду использовать мои значения здесь, замените их своими собственными.

По математике

Вам понадобится:

• Красиво скорректированное соотношение в некотором окне просмотра. Я использовал 320 пикселей, таким образом, я получил 24 пикселя в высоту и 224 пикселя в ширину, поэтому соотношение составляет 9,333... или 28/3
• Ширина контейнера, у меня было padding: 3em и полная ширина, так что это дало 100wv - 2 * 3em

X - ширина контейнера, поэтому замените его собственным выражением или измените значение, чтобы получить полностраничный текст. R - это соотношение, которое у вас будет. Вы можете получить его, откорректировав значения в некотором окне просмотра, проверив ширину и высоту элемента и заменив их своими собственными значениями. Кроме того, это width / heigth;)

x = 100vw - 2 * 3em = 100vw - 6em
r = 224px/24px = 9.333... = 28 / 3

y = x / r
  = (100vw - 6em) / (28 / 3)
  = (100vw - 6em) * 3 / 28
  = (300vw - 18em) / 28
  = (75vw - 4.5rem) / 7

И взрыв! Это сработало! Я написал

font-size: calc((75vw - 4.5rem) / 7)

к моему заголовку, и он корректно корректировался в каждом окне просмотра.

Но как это работает?

Нам нужны некоторые константы здесь. 100vw означает полную ширину области просмотра, и моей целью было установить заголовок полной ширины с некоторыми отступами.

Соотношение. Получив ширину и высоту в одном окне просмотра, я получил соотношение для игры, и с отношением я знаю, какой должна быть высота в другом окне просмотра. Вычисление их вручную заняло бы много времени и, по крайней мере, потребовало бы большой полосы пропускания, поэтому это не очень хороший ответ.

Заключение

Интересно, почему никто не понял этого, а некоторые люди даже говорят, что с CSS было бы невозможно повозиться. Я не люблю использовать JavaScript для настройки элементов, поэтому я не принимаю ответы JavaScript (и забываю о jQuery), не копая больше. В общем, хорошо, что это выяснили, и это один из шагов к реализации чистого CSS в дизайне веб-сайтов.

Я прошу прощения за любое необычное соглашение в моем тексте, я не являюсь носителем английского языка и также довольно новичок в написании ответов Qaru.

Следует также отметить, что в некоторых браузерах есть злые полосы прокрутки. Например, при использовании Firefox я заметил, что 100vw означает полную ширину области просмотра, простирающуюся под полосой прокрутки (где содержимое не может расширяться!), Поэтому текст полной ширины должен быть аккуратно выделен и желательно тестироваться на многих браузерах и устройствах.

Ответ 7

Вот функция:

document.body.setScaledFont = function(f) {
  var s = this.offsetWidth, fs = s * f;
  this.style.fontSize = fs + '%';
  return this
};

Затем преобразуйте все размеры шрифтов дочерних элементов документов в em или %.

Затем добавьте что-то подобное в свой код, чтобы установить базовый размер шрифта.

document.body.setScaledFont(0.35);
window.onresize = function() {
    document.body.setScaledFont(0.35);
}

http://jsfiddle.net/0tpvccjt/

Ответ 8

Есть способ сделать это без JavaScript!

Вы можете использовать встроенное изображение SVG. Вы можете использовать CSS в SVG, если он встроенный. Вы должны помнить, что использование этого метода означает, что ваше изображение SVG будет реагировать на размер своего контейнера.

Попробуйте использовать следующее решение...

HTML

<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360.96 358.98" >
      <text>SAVE $500</text>
  </svg>
</div>

CSS

div {
  width: 50%; /* Set your container width */
  height: 50%; /* Set your container height */

}

svg {
  width: 100%;
  height: auto;

}

text {
  transform: translate(40px, 202px);
  font-size: 62px;
  fill: #000;
}

Пример: https://jsfiddle.net/k8L4xLLa/32/

Хотите что-нибудь более роскошное?

Изображения SVG также позволяют делать классные вещи с формами и мусором. Проверьте этот отличный вариант использования для масштабируемого текста...

https://jsfiddle.net/k8L4xLLa/14/

Ответ 9

Это может быть не очень практично, но если вы хотите, чтобы шрифт был прямой функцией родителя, без какого-либо JavaScript, который прослушивает/зацикливается (интервал) для чтения размера div/страницы, есть способ сделать это, Iframes.

Все в пределах iframe будет рассматривать размер iframe как размер области просмотра. Таким образом, хитрость заключается в том, чтобы просто создать iframe, ширина которого равна максимальной ширине, которую вы хотите, чтобы ваш текст, и высота которой равна максимальной высоте * конкретное соотношение сторон текста.

Если не принимать во внимание ограничение на то, что единицы видового экрана не могут также встречаться с боковыми родительскими единицами для текста (например, если размер% ведет себя как все остальные), единицы видового экрана действительно предоставляют очень мощный инструмент: возможность получить минимальное/максимальное измерение, Вы не можете сделать это где-нибудь еще - вы не можете сказать... сделайте высоту этого div равной ширине родительского элемента * что-то.

При этом хитрость заключается в том, чтобы использовать vmin и установить размер iframe таким образом, чтобы [фракция] * общая высота была хорошим размером шрифта, когда высота является ограничивающим размером, и [дробь] * общая ширина, когда ширина является предельное измерение. Вот почему высота должна быть произведением ширины и соотношения сторон.

Для моего конкретного примера у вас есть

.main iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: calc(3.5 * 100%);
  background: rgba(0, 0, 0, 0);
  border-style: none;
  transform: translate3d(-50%, -50%, 0);
}

Небольшое неудобство с этим методом заключается в том, что вы должны вручную установить CSS для iframe. Если вы приложите весь CSS файл, это займет много пропускной способности для многих текстовых областей. Итак, что я делаю, так это прикрепляю правило, которое хочу, прямо из моего CSS.

var rule = document.styleSheets[1].rules[4];
var iDoc = document.querySelector('iframe').contentDocument;
iDoc.styleSheets[0].insertRule(rule.cssText);

Вы можете написать небольшую функцию, которая получает правило CSS/все правила CSS, которые будут влиять на текстовую область.

Я не могу придумать другой способ сделать это без некоторого зацикливания/прослушивания JavaScript. Реальным решением было бы для браузеров предоставить способ масштабирования текста в зависимости от родительского контейнера, а также предоставить те же функциональные возможности типа vmin/vmax.

JSFiddle: https://jsfiddle.net/0jr7rrgm/3/ (нажмите один раз, чтобы заблокировать красный квадрат для мыши, и нажмите еще раз, чтобы отпустить)

Большая часть JavaScript в скрипте - это просто моя пользовательская функция перетаскивания мышью.

Ответ 10

Используя vw, em & сотрудничество. работает точно, но для подстройки IMO всегда нужно человеческое прикосновение.

Вот сценарий, который я только что написал на основе ответа @ant-rox answer, который пытается автоматизировать это человеческое прикосновение:

$('#controller').click(function(){
    $('h2').each(function(){
        var
            $el = $(this),
            max = $el.get(0),
            el = null
        ;
        max =
            max
            ? max.offsetWidth
            : 320
        ;
        $el.css({
            'font-size': '1em',
            'display': 'inline',
        });
        el = $el.get(0);

        el.get_float = function(){
            var
                fs = 0
            ;
            if (this.style && this.style.fontSize) {
                fs = parseFloat(this.style.fontSize.replace(/([\d\.]+)em/g, '$1'));
            }
            return fs;
        };

        el.bigger = function(){
            this.style.fontSize = (this.get_float() + 0.1) + 'em';
        };

        while (el.offsetWidth < max) {
            el.bigger();
        }

        // Finishing touch.
        $el.css({
            'font-size': ((el.get_float() -0.1) +'em'),
            'line-height': 'normal',
            'display': '',
        });
    });  // end of (each)
});    // end of (font scaling test)

div {
  width: 50%;
  background-color: tomato;
  font-family: 'Arial';
}

h2 {
  white-space: nowrap;
}

h2:nth-child(2) {
  font-style: italic;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="button" id="controller" value="Apply" />
<div>
  <h2>Lorem ipsum dolor</h2>
  <h2>Test String</h2>
  <h2>Sweet Concatenation</h2>
  <h2>Font Scaling</h2>
</div>

Ответ 11

Мое собственное решение, основанное на jQuery, работает за счет постепенного увеличения размера шрифта, пока высота контейнера не сильно увеличится (это означает, что он получил разрыв строки).

Это довольно просто, но работает довольно хорошо, и это очень легко использовать. Вам не нужно ничего знать об используемом шрифте, браузер позаботится обо всем.

Вы можете играть с ним на http://jsfiddle.net/tubededentifrice/u5y15d0L/2/

Волшебство происходит здесь:

var setMaxTextSize=function(jElement) {
    // Get and set the font size into data for reuse upon resize
    var fontSize=parseInt(jElement.data(quickFitFontSizeData)) || parseInt(jElement.css("font-size"));
    jElement.data(quickFitFontSizeData, fontSize);

    // Gradually increase font size until the element gets a big increase in height (i.e. line break)
    var i = 0;
    var previousHeight;
    do
    {
        previousHeight=jElement.height();
        jElement.css("font-size", "" + (++fontSize) + "px");
    }
    while(i++ < 300 && jElement.height()-previousHeight < fontSize/2)

    // Finally, go back before the increase in height and set the element as resized by adding quickFitSetClass
    fontSize -= 1;
    jElement.addClass(quickFitSetClass).css("font-size", "" + fontSize + "px");

    return fontSize;
};

Ответ 12

100% по отношению к базовому размеру шрифта, который, если вы его не установили, будет по умолчанию браузерным агентом пользователя.

Чтобы получить желаемый эффект, я бы использовал фрагмент кода JavaScript, чтобы настроить базовый размер шрифта относительно размеров окна.

Ответ 13

Внутри вашего CSS, попробуйте добавить это внизу, изменяя ширину 320 пикселей, где бы ваш дизайн не ломался:

    @media only screen and (max-width: 320px) {

        body { font-size: 1em; }

    }

Затем укажите желаемый размер шрифта в "px" или "em".

Ответ 14

Попробуйте http://simplefocus.com/flowtype/. Это то, что я использую для своих сайтов, и это сработало отлично.

Ответ 15

Возможно, вы ищете что-то вроде этого:

http://jsfiddle.net/sijav/dGsC9/4/
http://fiddle.jshell.net/sijav/dGsC9/4/show/

  Я использовал flowtype, и он отлично работает (однако это JavaScript, а не просто решение CSS):

$('body').flowtype({
    minFont: 10,
    maxFont: 40,
    minimum: 500,
    maximum: 1200,
    fontRatio: 70
});

Ответ 16

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

Вы можете использовать это так:

<full-width-text>Lorem Ipsum</full-width-text>

Ответ 17

Я подготовил простую функцию масштабирования, используя CSS-преобразование вместо font-size. Вы можете использовать его внутри любого контейнера, вам не нужно задавать медиа-запросы и т.д. :)

Сообщение блога: CSS на всю ширину & JS масштабируемый заголовок

Код:

function scaleHeader() {
  var scalable = document.querySelectorAll('.scale--js');
  var margin = 10;
  for (var i = 0; i < scalable.length; i++) {
    var scalableContainer = scalable[i].parentNode;
    scalable[i].style.transform = 'scale(1)';
    var scalableContainerWidth = scalableContainer.offsetWidth - margin;
    var scalableWidth = scalable[i].offsetWidth;
    scalable[i].style.transform = 'scale(' + scalableContainerWidth / scalableWidth + ')';
    scalableContainer.style.height = scalable[i].getBoundingClientRect().height + 'px';
  }
}

Рабочая демонстрация:https://codepen.io/maciejkorsan/pen/BWLryj

Ответ 18

Моя проблема была похожа, но связана с масштабированием текста внутри заголовка. Я попробовал Fit Font, но мне нужно было включить компрессор, чтобы получить какие-либо результаты, так как он решал немного другую проблему, как Text Flow.

Поэтому я написал свой собственный небольшой плагин, который уменьшал размер шрифта до размера контейнера, предполагая, что у вас есть overflow: hidden и white-space: nowrap, так что даже если сокращение шрифта до минимума не позволяет отображать полный заголовок, оно просто обрезает то, что это может показать.

(function($) {

  // Reduces the size of text in the element to fit the parent.
  $.fn.reduceTextSize = function(options) {
    options = $.extend({
      minFontSize: 10
    }, options);

    function checkWidth(em) {
      var $em = $(em);
      var oldPosition = $em.css('position');
      $em.css('position', 'absolute');
      var width = $em.width();
      $em.css('position', oldPosition);
      return width;
    }

    return this.each(function(){
      var $this = $(this);
      var $parent = $this.parent();
      var prevFontSize;
      while (checkWidth($this) > $parent.width()) {
        var currentFontSize = parseInt($this.css('font-size').replace('px', ''));
        // Stop looping if min font size reached, or font size did not change last iteration.
        if (isNaN(currentFontSize) || currentFontSize <= options.minFontSize ||
            prevFontSize && prevFontSize == currentFontSize) {
          break;
        }
        prevFontSize = currentFontSize;
        $this.css('font-size', (currentFontSize - 1) + 'px');
      }
    });
  };
})(jQuery);

Ответ 19

Используйте CSS-переменные

Никто еще не упомянул CSS-переменные, и этот подход работал лучше всего для меня, поэтому:

Допустим, у вас есть столбец на вашей странице, который составляет 100% ширины экрана мобильного пользователя, но имеет max-width 800 пикселей, поэтому на рабочем столе с обеих сторон столбца есть свободное место. Поместите это в верхней части вашей страницы:

<script> document.documentElement.style.setProperty('--column-width', Math.min(window.innerWidth, 800)+'px'); </script>

И теперь вы можете использовать эту переменную (вместо встроенного модуля vw), чтобы установить размер шрифта. Например

p {
  font-size: calc( var(--column-width) / 100 );
}

Это не чистый подход CSS, но это довольно близко.

Ответ 20

Взгляните на мой код. Это превращает font size smaller в fit все, что там есть.

Но я думаю, что это не приведет к хорошему опыту пользователя

var containerWidth = $("#ui-id-2").width();
var items = $(".quickSearchAutocomplete .ui-menu-item");
var fontSize = 16;

items.each(function(){
    // Displaying a value depends sometimes on your case. You may make it block or inline-table instead of inline-block or whatever value that make the div take overflow width.
    $(this).css({"whiteSpace": "nowrap", "display": "inline-block"});
    while ($(this).width() > containerWidth){
         console.log("$(this).width()" + $(this).width() + "containerWidth" + containerWidth)
         $(this).css("font-size", fontSize -= 0.5);
    }
});

Ответ 21

Попробуйте использовать плагин fitText, поскольку размеры окна просмотра не являются решением этой проблемы.

Просто добавьте библиотеку:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

И измените размер шрифта для правильной настройки параметров текста:

$("#text_div").fitText(0.8);

Вы можете установить максимальное и минимальное значения текста:

$("#text_div").fitText(0.8, { minFontSize: '12px', maxFontSize: '36px' });

Ответ 22

Всегда имейте свой элемент с этим атрибутом:

JavaScript: element.style.fontSize = "100%";

или

CSS: style = "font-size: 100%;"

Когда вы переходите в полноэкранный режим, у вас уже должна быть рассчитана переменная scale (scale> 1 или scale = 1). Затем в полноэкранном режиме:

document.body.style.fontSize = (scale * 100) + "%";

Хорошо работает с небольшим кодом.

Ответ 23

Как резервное копирование JavaScript (или ваше единственное решение), вы можете использовать мой плагин jQuery Scalem, который позволяет масштабировать относительно родительского (контейнер), передав параметр reference.

Ответ 24

В случае, если это полезно для всех, большинство решений в этом потоке были обертыванием текста на несколько строк, формы e.

Но потом я нашел это, и он сработал:

https://github.com/chunksnbits/jquery-quickfit

Пример использования:

$('.someText').quickfit({max:50,tolerance:.4})

Ответ 25

Для динамического текста этот плагин весьма полезен:

http://freqdec.github.io/slabText/

Просто добавьте CSS:

.slabtexted .slabtext
{
    display: -moz-inline-box;
    display: inline-block;
    white-space: nowrap;
}
.slabtextinactive .slabtext
{
    display: inline;
    white-space: normal;
    font-size: 1em !important;
    letter-spacing: inherit !important;
    word-spacing: inherit !important;
    *letter-spacing: normal !important;
    *word-spacing: normal !important;
}
.slabtextdone .slabtext
{
    display: block;
}

И сценарий:

$('#mydiv').slabText();

Ответ 26

Это сработало для меня:

Я пытаюсь приблизить размер шрифта на основе ширины/высоты, полученной из настройки 'font-size: 10px'. По сути, идея заключается в том, что "если у меня есть ширина 20 пикселей и высота 11 пикселей с параметром font-size: 10px, то какой будет максимальный размер шрифта для вычисления контейнера шириной 50 пикселей и высотой 30 пикселей?"

Ответ - система двойной пропорции:

{20: 10 = 50: X, 11:10 = 30: Y} = {X = (10 * 50)/20, Y = (10 * 30)/11}

Теперь X - это размер шрифта, который будет соответствовать ширине, а Y - это размер шрифта, который будет соответствовать высоте; принять наименьшее значение

function getMaxFontSizeApprox(el){
    var fontSize = 10;
    var p = el.parentNode;

    var parent_h = p.offsetHeight ? p.offsetHeight : p.style.pixelHeight;
    if(!parent_h)
        parent_h = 0;

    var parent_w = p.offsetHeight ? p.offsetWidth : p.style.pixelWidth;
    if(!parent_w)
        parent_w = 0;

    el.style.fontSize = fontSize + "px";

    var el_h = el.offsetHeight ? el.offsetHeight : el.style.pixelHeight;
    if(!el_h)
        el_h = 0;

    var el_w = el.offsetHeight ? el.offsetWidth : el.style.pixelWidth;
    if(!el_w)
        el_w = 0;

    // 0.5 is the error on the measure that JavaScript does
    // if the real measure had been 12.49 px => JavaScript would have said 12px
    // so we think about the worst case when could have, we add 0.5 to 
    // compensate the round error
    var fs1 = (fontSize*(parent_w + 0.5))/(el_w + 0.5);
    var fs2 = (fontSize*(parent_h) + 0.5)/(el_h + 0.5);

    fontSize = Math.floor(Math.min(fs1,fs2));
    el.style.fontSize = fontSize + "px";
    return fontSize;
}

NB: аргумент функции должен быть элементом span или элементом, который меньше, чем его родитель, иначе, если у детей и родителя обе функции одинаковой ширины/высоты, произойдет сбой.

Ответ 27

Чтобы размер шрифта соответствовал его контейнеру, а не окну, см. функцию resizeFont(), которой я поделился в этом вопросе (комбинация других ответов, большинство из которых уже связаны здесь). Он запускается с помощью window.addEventListener('resize', resizeFont);.

Vanilla JavaScript: измените размер шрифта, чтобы он подходил для контейнера

JavaScript:

function resizeFont() {
  var elements  = document.getElementsByClassName('resize');
  console.log(elements);
  if (elements.length < 0) {
    return;
  }
  _len = elements.length;
  for (_i = 0; _i < _len; _i++) {
    var el = elements[_i];
    el.style.fontSize = "100%";
    for (var size = 100; el.scrollHeight > el.clientHeight; size -= 10) {
      el.style.fontSize = size + '%';
    }
  }
}

Возможно, вы можете использовать vw/vh в качестве запасного варианта, поэтому вы динамически назначаете единицы em или rem с помощью JavaScript, гарантируя, что шрифты масштабируются до окна, если JavaScript отключен.

Примените класс .resize ко всем элементам, содержащим текст, который вы хотите масштабировать.

Запустите функцию перед добавлением окна прослушивания событий изменения размера. Затем любой текст, который не помещается в его контейнер, будет уменьшен при загрузке страницы, а также при ее изменении.

ПРИМЕЧАНИЕ. Для достижения правильных результатов по умолчанию для параметра font-size должно быть установлено значение em, rem или %.

Ответ 28

Я не вижу ответа относительно свойства CSS flex, но он также может быть очень полезным.

Ответ 29

HTML

<div style="height:100px; width:200px;">
  <div id='qwe'>
    test
  </div>
</div>

JavaScript-код для максимизации размера шрифта:

el = document.getElementById('qwe');
maxFontPixels = 50;
maxHeight = el.parentElement.offsetHeight;
fontSize = Number(maxFontPixels || maxHeight);
el.style.width = '100%';
el.style.overflowWrap = 'break-word';
var minFS = 3, maxFS = fontSize;
while (fontSize != minFS) {
  el.style.fontSize = '${fontSize}px';
  if (el.offsetHeight < maxHeight) {
    minFS = fontSize;
  }
  else {
    maxFS = fontSize;
  }
  fontSize = Math.floor((minFS + maxFS)/2);
}
el.style.fontSize = '${minFS}px';

Ответ 30

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

Ниже приведено изменение размера шрифта к размеру контейнера, независимо от того, масштабируется ли контейнер до размера области просмотра или достигает ли он максимального значения. Если у вас есть контейнеры шириной не 100%, вы можете соответствующим образом настроить vw.

.container {
    width: 100%;
    max-width: 600px;
}
.headline {
    font-size: 20vw;
}
.subhead {
    font-size: 5vw;
}
@media (min-width:600px) {
    .headline {
        font-size: 120px;
    }
    .subhead {
        font-size: 32px;
    }
}