фиксированная ширина div, изменение размера текста на лету в зависимости от длины - PullRequest
Новая
       14

фиксированная ширина div, изменение размера текста на лету в зависимости от длины

2 голосов
/ 12 марта 2010

Допустим, у вас есть простой макет фиксированной ширины, который извлекает title из базы данных MySQL.

CSS: 

 #wrapper {
    width: 800px;
 }

 h1 {
    width: 100%;
 }

HTML: 

 <html>
  <body>
   <div id="wrapper">
    <h1> $titleString </h1>
   </div>
  </body>
 </html>

Но подвох в том, что длина строки заголовка, извлеченной из базы данных MySQL, сильно варьируется. Иногда это может быть 10 символов, иногда это может быть 80. Можно установить минимальное и максимальное количество символов.

Как, если это вообще возможно, получить text-size моего <h1>$titleString</h1> для увеличения / уменьшения на лету таким образом, чтобы строка находилась только в одной строке и наилучшим образом соответствовала этой длине строки? Я видел много вопросов по изменению размера div, но в моем случае div всегда должен быть 100% (800px), и я хочу, чтобы заголовок соответствовал названию.

Очевидно, что максимальное значение text-size должно быть установлено, чтобы 5 строк символов не становились гигантскими.

У кого-нибудь есть предложение? В настоящее время я использую только PHP / MySQL / CSS на этой странице, но включение другого языка хорошо, если это означает, что я могу решить проблему.

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

Ответы [ 2 ]

2 голосов
/ 08 февраля 2012

Мне повезло, используя довольно простой подход в php. Немного поиграюсь с числами, чтобы соответствовать вашему приложению: у меня было место для заголовка, который мог вместить около 30 символов при размере шрифта: 1,65em, поэтому я сделал более длинные заголовки пропорционально меньшему размеру шрифта, например: 

$title = $row->title;
$title_length = strlen($title);
if ($title_length > 30)
    $title_size = 1.65 * (30 / $title_length);
else $title_size = 1.65;

print('<span style="font-size: '.$title_size.'em;display: inline;">'. $title.'</span>');
1 голос
/ 12 марта 2010

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

 var title = document.getElementById("title");
 var width = title.offsetWidth;

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

 <span id="title">The Title</span>

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

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

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

Этот вопрос описывает вычисление ширины текста.

Например, я быстро написал это, используя jQuery. Предположим, у вас есть такой HTML-код: 

<span id="mytitle" style="font-size:14pt;">
    A very long title that may be more than 800px in width. And even longer.
</span>

Я использовал span, потому что он изменяется по ширине текста, а не по контейнеру. И код JQuery: 

 $(document).ready(function(){        
    var w = $("#mytitle").width();
    while(w > 800){
       var currentFontSize = $('#mytitle').css('font-size');
       var currentFontSizeNum = parseFloat(currentFontSize, 10);
       var newFontSize = currentFontSizeNum*0.95;
       $('#mytitle').css('font-size', newFontSize);
       w = $("#mytitle").width();
   //alert("Width:" + w);
}
  });

То есть многократно уменьшать размер шрифта на 5%, пока общая ширина не станет меньше или равна 800px.

...