изменить размер шрифта, чтобы поместиться в div (в одну строку)

Question

Были заданы похожие вопросы, но решения совпадают с тем, что я пытаюсь сделать.По сути, у меня есть статья с заголовком (<h1>).Я не хочу контролировать длину заголовка, но также не хочу, чтобы заголовок отображался в нескольких строках.Есть ли способ с помощью CSS или JQuery изменить размер текста в зависимости от ширины тега <div>?

Я знаю, что бы я сделал с псевдокодом, если бы я мог обнаружить перекрытие текста к краю<div>:

var fontize = $("#title").css("font-size");
var i = /*remove unit from integer*/
while( /*text overlaps div*/ ){
    $("#title").css("font-size", --i+"pt");
}

Если есть атрибут CSS, который я могу установить, он будет еще приятнее, но, кажется, я не могу его найти (переполнение не будет работать в этой ситуации).

Answer 1

Посмотрите этот пример здесь http://codepen.io/LukeXF/pen/yOQWNb, Вы можете использовать простую функцию загрузки страницы и изменения размера страницы, чтобы волшебство произошло.Хотя будьте осторожны, чтобы не отвлекать клиента от слишком большого количества вызовов функций.(В примере есть задержка).

function resize() {  
    $('.resize').each(function(i, obj) {
        $(this).css('font-size', '8em');

        while ($(this).width() > $(this).parent().width()) {
            $(this).css('font-size', (parseInt($(this).css('font-size')) - 1) + "px");
        }
    });
}

Answer 2

Я понимаю, что на этот вопрос, похоже, ответили довольно тщательно, но были некоторые случаи, когда решения здесь могли бы вызвать другие проблемы.Например, библиотека tkahn выглядела очень полезной, но она изменила отображение элемента, к которому она была прикреплена, что может оказаться проблемой.В моем случае это помешало мне центрировать текст как по вертикали, так и по горизонтали.После некоторого возни и экспериментов я придумал простой метод, включающий jQuery, чтобы разместить текст в одну строку без необходимости изменять какие-либо атрибуты родительского элемента.Обратите внимание, что в этом коде я использовал предложение Роберта Коритника для оптимизации цикла while.Чтобы использовать этот код, просто добавьте класс "font_fix" к любым элементам div, содержащим текст, который необходимо разместить в одной строке.Для заголовка это может потребовать дополнительного div вокруг заголовка.Затем либо вызовите эту функцию один раз для div с фиксированным размером, либо установите для него прослушиватель изменения размера и / или ориентации для различных размеров.

function fixFontSize(minimumSize){
  var x = document.getElementsByClassName("font_fix");
  for(var i = 0; i < x.length; i++){
    x[i].innerHTML = '<div class="font_fix_inner" style="white-space: nowrap; display: inline-block;">' + x[i].innerHTML + '</div>';

    var y = x[i].getElementsByClassName("font_fix_inner")[0];
    var size = parseInt($("#" + x[i].id).css("font-size"));

    size *= x[i].clientWidth / y.clientWidth;
    while(y.clientWidth > x[i].clientWidth){
      size--;
      if(size <= minimumSize){
        size = minimumSize;
        y.style.maxWidth = "100%";
        y.style.overflow = "hidden";
        y.style.textOverflow = "ellipsis";
        $("#" + x[i].id).css("font-size", size + "px");
        break;
      }
      $("#" + x[i].id).css("font-size", size + "px");
    }
  }
}

Теперь я добавил дополнительный случай, когда текстотрубается, если он становится слишком маленьким (ниже минимального порога, переданного в функцию) для удобстваЕще одна вещь, которая происходит после достижения этого порога, который может или не может быть желательным, - это изменение максимальной ширины до 100%.Это должно быть изменено для каждого сценария пользователя.Наконец, вся цель публикации этого ответа как альтернативы заключается в его способности центрировать контент внутри родительского div.Это легко сделать, добавив атрибуты css во внутренний класс div следующим образом:

.font_fix_inner {
  position: relative;
  float: center;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

Надеюсь, это кому-то помогло!

Answer 3

Я сделал очень маленький JQuery для настройки размера шрифта вашего div.Он даже работает с несколькими строками, но только увеличит размер шрифта (вы можете просто установить размер шрифта по умолчанию 1px, если хотите).Я увеличиваю размер шрифта до разрыва строки, set уменьшает его на 1px.Никаких других причудливых вещей, скрытых div или около того.Просто добавьте класс quickfit к вашему div.

$(".quickfit").each(function() {
    var jThis=$(this);
    var fontSize=parseInt(jThis.css("font-size"));
    var originalLines=jThis.height()/fontSize;

    for(var i=0;originalLines>=jThis.height()/fontSize && i<30;i++)
    { jThis.css("font-size",""+(++fontSize)+"px"); }
    jThis.css("font-size",""+(fontSize-1)+"px");
});

Answer 4

Мое решение, как расширение jQuery, основанное на Ответ Роберта Коритника :

$.fn.fitToWidth=function(){
    $(this).wrapInner("<span style='display:inline;font:inherit;white-space:inherit;'></span>").each(function(){
        var $t=$(this);
        var a=$t.outerWidth(),
            $s=$t.children("span"),
            f=parseFloat($t.css("font-size"));
        while($t.children("span").outerWidth() > a) $t.css("font-size",--f);
        $t.html($s.html());
    });
}

Это фактически создает временный интервал, наследующий важные свойства, и сравнивает разницу в ширине. Конечно, цикл while необходимо оптимизировать (уменьшить на процентную разницу, рассчитанную между двумя размерами).

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

$(function(){
    $("h1").fitToWidth();
});