uzunluğuna göre anında sabit genişlik div, yeniden boyutlandırma metin

2 Cevap php

Diyelim ki, bir MySQL veritabanı bir title çeker basit sabit genişlikte bir düzen var diyelim.

CSS:

 #wrapper {
    width: 800px;
 }

 h1 {
    width: 100%;
 }

HTML:

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

Ama yakalamak MySQL veritabanı çekti başlık dize uzunluğu çılgınca değişir, olduğunu. Bazen bazen 80 olabilir, 10 karakter olabilir. Bir dakika kurmak mümkün & maksimum karakter sayısı.

Nasıl, eğer mümkünse, ben text-size içinde alabilirim benim <h1>$titleString</h1> on-the-fly / azalma Büyütmek için dize bir hat ve iyi oturması için yalnızca şimdiye kadar olduğu gibi Bu hat uzunluğu? Ben div yeniden boyutlandırma hakkında bir çok soru gördüm - ama benim durumumda div her zaman% 100 (800px) olmalı ve ben başlığı en uygun istiyorum.

Açıkçası maksimum text-size değer 5 karakter dizeleri devasa olmazlar şekilde ayarlanması gerekir.

Herkes bir öneri var mı? Ben sadece şu anda bu sayfada PHP / MySQL / CSS kullanıyorum, ama ben sorunu çözmek anlamına gelir eğer başka bir dilin birleşme gayet iyi.

Aklıma tek şey bir bruteforce yaklaşımdır sayede deneme ve yanılma yoluyla CSS em boyutları ile eşleşen kabul dize karakter sayısı aralıklarını kurmak, ama bu kod tarafında oldukça çirkin bir uygulama olurdu.

2 Cevap

Belki bir çözüm bazı standart yazı tipi boyutu verilen metnin genişliğini hesaplamak için javascript kullanmak olacaktır makul bir genişlik elde edene kadar, daha sonra yeniden boyutlandırmak. Javascript böyle metnin genişliğini hesaplayabiliriz:

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

Initailly metin font-size dışında uygulanan hiçbir stilleri ile bir sürede yerleştirilir.

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

Daha sonra metnin genişliği 800px daha büyük olup olmadığını kontrol edin ve genişliği daha az veya eşit olana kadar font-size azaltabilir. Bu başlık yayılma diğer stilleri başlangıçta bunun için uygulanan veya sonuç yanlış olacaktır bulunmamış olması önemlidir.

Sen genişlik 200px belki daha az, çok kısa olup olmadığını da kontrol edin ve buna göre font-boyutunu artırabilir.

Eğer metin boyutlu olduğunu kendiniz tatmin ettikten sonra uygun sonra h1 içine metni taşımak ve font-boyutunu ayarlayın.

This question, metin genişliği hesaplanması anlatılmaktadır.

Örneğin, ben hızlı jQuery kullanarak bu yazdı. Bu gibi HTML olduğunu varsayalım:

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

Bunun yerine, kabın daha metnin genişliğine yeniden boyutlandırılır için bir yayılma kullanılır. Ve jQuery kodu:

 $(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);
}
  });

Toplam genişliği veya daha az 800px eşit olana kadar yani, art arda% 5 font-boyutunu azaltmak.

Ben php oldukça basit bir yaklaşım kullanarak biraz şans oldu. Başvurunuzu maç numaraları ile bazı oynarken Alır: Ben font-size yaklaşık 30 karakter sığabilir başlık için bir boşluk vardı: 1.65em, bu yüzden çok gibi küçük bir yazı tipi boyutu orantılı olarak uzun başlıklar yaptı:

$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>');

etiketler