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

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

Ответ 1

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

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

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

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

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

Ответ 2

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

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

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

Ответ 3

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

Ответ 4

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

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

Ответ 5

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

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

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

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

Ответ 6

Я предполагаю, что у вас есть размер текста по умолчанию, поэтому установите его и проверьте значение offsetHeight элемента. Если это, очевидно, две строки, уменьшите размер шрифта до тех пор, пока offsetHeight резко не уменьшится примерно на 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();
  }
});