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 (502 bytes) 21.02.2021 00:18
<!DOCTYPE html >
<html>
  <head>
    <title>fittext</title>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: " />
    <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) 16.08.2014 01: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();};
}

Author: , published: , last modified:

Kontakt

Udo Schmal

Udo Schmal
Softwareentwickler
Olvengraben 41
47608 Geldern
Nordrhein-Westfalen
Germany





+49 2831 9776557
+49 1575 0663676
+49 2831 1328709
SMS
WhatsApp

Instagram Profile
vCard 3.0

Service Infos

CMS Info Product Name:
UDOs Webserver
Version:
0.5.0.68
Description:
All in one Webserver
Copyright:
Udo Schmal
Compilation:
Tue, 4. May 2021 23:15:05
Development Info Compiler:
Free Pascal FPC 3.3.1
compiled for:
OS:Linux, CPU:x86_64
System Info OS:
Ubuntu 20.04.2 LTS (Focal Fossa)
Hardware Info Model:
Hewlett-Packard HP Pavilion dv7 Notebook PC
CPU Name:
Intel(R) Core(TM) i5-2450M CPU @ 2.50GHz
CPU Type:
x86_64, 1 physical CPU(s), 2 Core(s), 4 logical CPU(s), 1607.994 MHz