als PDF herunterladen als RTF herunterladen als HTML herunterladen als TXT herunterladen drucken

Text einpassen in Zeile

Wer kennt es nicht, mal wieder bricht die Überschrift um, aber eigentlich dürfte sie lieber kleiner sein als umbrechen, also einfach die Schriftgröße eins - zwei Pixel kleiner, aber nur an den Stellen wo es erforderlich ist!

Das folgende Beispiel zeigt eine Möglichkeit die das ganze automatisiert, wie üblich ohne großes Framework!

HTML:

fittext.htm HTML (313 bytes) 05.10.2014 23:29


<html>
  <head>
    <title>fittext
    </title>
    <script type="text/javascript" src="jsFitText.js"></script>
  </head>
  <body>
    <h1 class="fittoline" style="border:1px solid black;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    </h1>
  </body>
</html>

JavaScript:

jsFitText.js JavaScript (1,94 kByte) 15.08.2014 23:32

function fitText(el) {
  // get the max width and the max font-size
  var elWidth = (el.style.width ? parseFloat(el.style.width, 10) : el.offsetWidth);
  var fontSize = (el.style.fontSize ? parseFloat(el.style.fontSize, 10) : 50);
  if (!el.getAttribute("data-type") || (el.getAttribute("data-type") != "fittoline")) {
    // wrap a span around the content
    var span = document.createElement("span");
    while (el.hasChildNodes()) {
      span.appendChild(el.removeChild(el.firstChild));
    };
    el.appendChild(span);
    span.style.display = "inline-block";
    try {
      span.style.font = "inherited";
    } catch(err) {
      // IE lt 9 fallback
      span.style.fontSize = "20px";
    }
    span.style.whiteSpace = "nowrap";
    // set values for the next access (resize)
    el.setAttribute("data-type", "fittoline");
    el.setAttribute("data-font-size", fontSize);
  } else {
    var span = el.firstChild;
    while ((span.offsetWidth < elWidth) && (el.getAttribute("data-font-size") > fontSize)) {
      el.style.fontSize = ++fontSize + "px";
    };
  }
  // decrease font-size until span width less then max width
  while (span.offsetWidth > elWidth) {
    el.style.fontSize = --fontSize + "px";
  };
};

function initFitText() {
  var i, tags = document.getElementsByTagName('h1');
  for(i=0; i<tags.length; i++) {
    var sClass = " "+tags[i].className+" ";
    if (sClass.indexOf(" fittoline ") !== -1) {
      fitText(tags[i]);
    }
  }
}

if (window.addEventListener !== undefined) { // W3C
  window.addEventListener('load', function() {initFitText();});
  window.addEventListener('resize', function() {initFitText();});
} else if (window.attachEvent) { // old IE
  window.attachEvent('onload', function() {initFitText();});
  window.attachEvent('onresize', function() {initFitText();});
} else { // fallback
  window.onload = function() {initFitText();};
  window.onresize = function() {initFitText();};
}