Программно определите Размер шрифта для однострочного дисплея
Вам будет нелегко иметь дело с международными номерами с единственным/простым regex, видеть это сообщение на трудностях международных (и даже североамериканец) номера телефона.
Вы захотите проанализировать первые несколько цифр для определения, каков код страны, затем действуйте по-другому на основе страны.
Кроме того - список, который Вы дали, не включает другой общий американский формат - бросающий начальный 1. Большинство сотовых телефонов в США не требует его, и это начнет экранировать молодого поколения, если они не набрали на международном уровне.
Вы правильно определили, что это - хитрая проблема...
-Adam
6 ответов
Что-то вроде хака, но: Что-то вроде этого поможет вам приблизиться. Вероятно, это потребует немного дополнительной настройки. По сути, он клонирует элемент и устанавливает текст клона на & nbsp, поэтому он получает представление о том, какой будет высота одной строки. Затем он уменьшает размер шрифта элемента до тех пор, пока он не станет меньше целевой высоты.
Имейте в виду, что вам также потребуется присоединить эту функцию к родительскому 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();
});
});
Простым решением было бы поместить элемент прямо в конец строки и уменьшить размер текста до тех пор, пока значение offsetHeight не будет правильным. Например, заключите точку в:
<span id="check">.</span>
Теперь вы можете проверить, где находится ваша точка, и уменьшить размер текста, пока он не окажется ближе к ожидаемому. Если вы установите очень большую высоту строки для этой фразы, это упростит определение.
Я просто догадываюсь - можем ли мы сделать это, используя JS, чтобы узнать высоту контейнера текста, а затем при необходимости уменьшить размер шрифта? Я предполагаю, что это приведет к изменению размера содержимого страницы из-за изменения.
Вы можете просто подсчитать, сколько символов находится в заголовке, и на основе этого определить размер шрифта. Больше символов = меньший размер шрифта.
Я бы ограничил размер шрифта допустимым размером шрифта, чтобы избежать глупых результатов.
Подсчет символов - это решение, но вы должны учитывать ширину символов. «W» шире, чем «i», если вы не используете шрифты фиксированной ширины.
Более того, вы не можете гарантировать, что выбранный вами шрифт будет доступен в браузере клиента, что его настройки размера шрифта будут такими же, как у вас, и т. Д.
Однако вы можете комбинировать два решения - во-первых, приблизительный шрифт -size с использованием алгоритма подсчета символов, например - предположим, что символы имеют фиксированную ширину, а затем исправим свои вычисления с помощью клиентских js, если js все равно определит, что строка была разделена.
Это потребует некоторой настройки, но я считаю, что приемлемых результатов можно добиться.
Я предполагаю, что у вас есть размер текста по умолчанию, поэтому установите его и проверьте 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();
}
});