Программно определить размер шрифта для однострочного дисплея

Question

Я показываю статьи на странице. Заголовки статей иногда перетекают на две строки и могут даже содержать только одно слово во второй строке. Это очень нежелательно. С помощью jQuery / CSS, что было бы лучшим способом программно определить новый размер шрифта для заголовков, чтобы держать их в одной строке?

Answer 1

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

Имейте в виду, что вам также необходимо присоединить эту функцию к родительскому resize ().

$(document).ready(function() {
    $(".shrink").each(function() {
        var targetHeight = $(this).clone().html(" ").insertAfter($(this));

        while ($(this).height() > targetHeight.height()) {
            $(this).css("font-size", parseInt($(this).css("font-size")) - 1);
        }

        targetHeight.remove();
    });
});

Answer 2

Простым решением было бы поместить элемент прямо в конец строки и уменьшать размер текста до тех пор, пока его offsetHeight не будет правильным. Например, заключите точку остановки в:

<span id="check">.</span>

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

Answer 3

Я предполагаю, что у вас есть размер текста по умолчанию, поэтому установите его и проверьте offsetHeight элемента. Если это очевидно две строки, уменьшайте размер шрифта до тех пор, пока смещение OffHeight значительно не уменьшится примерно на 50%

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

var defaultSize = 36; // if title is taller than this, it will be shrinked

$(".articleTitle").each(function() {
  var h = $(this).height();
  var i = defaultSize;
  while(h > defaultSize) {
    i--;
    this.style.fontSize = i + 'px';
    h = $(this).height();
  }
});

Answer 4

Подсчет символов - это решение, но вы должны учитывать ширину символов. «W» шире, чем «i», если только вы не используете шрифты фиксированной ширины.

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

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

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

Answer 5

Вы можете просто посчитать, сколько символов в названии и рассчитать размер шрифта на основе этого. Больше символов = меньший размер шрифта.

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

Answer 6

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