Berechnen der Textbreite mit JavaScript

Question

Ich möchte JavaScript verwenden, um die Breite einer Zeichenkette zu berechnen. Ist dies möglich, ohne eine Monospace-Schriftart verwenden zu müssen?

Wenn es nicht eingebaut ist, ist meine einzige Idee, eine Tabelle der Breiten für jedes Zeichen zu erstellen, aber das ist ziemlich unvernünftig vor allem Unterstützung Unicode und verschiedenen Schriftgrößen (und allen Browsern, was das betrifft).

Answer 1

Für den Fall, dass jemand hierher gekommen ist und nach einer Möglichkeit sucht, die Breite einer Schnur zu messen und eine Möglichkeit, die größte Schriftgröße zu ermitteln, die in eine bestimmte Breite passt, hier ist eine Funktion, die auf @Domi's Lösung mit einer binären Suche:

/**
 * Find the largest font size (in pixels) that allows the string to fit in the given width.
 * 
 * @param {String} text - The text to be rendered.
 * @param {String} font - The css font descriptor that text is to be rendered with (e.g. "bold ?px verdana") -- note the use of ? in place of the font size.
 * @param {Number} width - The width in pixels the string must fit in
 * @param {Number} minFontPx - The smallest acceptable font size in pixels
 * @param {Number} maxFontPx - The largest acceptable font size in pixels
 **/
function GetTextSizeForWidth(text, font, width, minFontPx, maxFontPx) {
  for (;;) {
    var s = font.replace("?", maxFontPx);
    var w = GetTextWidth(text, s);
    if (w <= width) {
      return maxFontPx;
    }

    var g = (minFontPx + maxFontPx) / 2;

    if (Math.round(g) == Math.round(minFontPx) || Math.round(g) == Math.round(maxFontPx)) {
      return g;
    }

    s = font.replace("?", g);
    w = GetTextWidth(text, s);
    if (w >= width) {
      maxFontPx = g;
    } else {
      minFontPx = g;
    }
  }
}

Answer 2

Sie können dies auch mit createRange tun, was genauer ist als die Technik des Textklonens:

function getNodeTextWidth(nodeWithText) {
    var textNode = $(nodeWithText).contents().filter(function () {
        return this.nodeType == Node.TEXT_NODE;
    })[0];
    var range = document.createRange();
    range.selectNode(textNode);
    return range.getBoundingClientRect().width;
}

Answer 3

Besser ist es, zu erkennen, ob der Text passt, bevor Sie das Element anzeigen. So können Sie diese Funktion verwenden, für die das Element nicht auf dem Bildschirm angezeigt werden muss.

function textWidth(text, fontProp) {
    var tag = document.createElement("div");
    tag.style.position = "absolute";
    tag.style.left = "-999em";
    tag.style.whiteSpace = "nowrap";
    tag.style.font = fontProp;
    tag.innerHTML = text;

    document.body.appendChild(tag);

    var result = tag.clientWidth;

    document.body.removeChild(tag);

    return result;
}

Verwendung:

if ( textWidth("Text", "bold 13px Verdana") > elementWidth) {
    ...
}

Answer 4

Der Code-Schnipsel unten "berechnet" die Breite des span-Tags, hängt "..." an, wenn es zu lang ist, und reduziert die Textlänge, bis es in das übergeordnete Element passt (oder bis es mehr als tausend Mal versucht wurde)

CSS

div.places {
  width : 100px;
}
div.places span {
  white-space:nowrap;
  overflow:hidden;
}

HTML

<div class="places">
  <span>This is my house</span>
</div>
<div class="places">
  <span>And my house are your house</span>
</div>
<div class="places">
  <span>This placename is most certainly too wide to fit</span>
</div>

JavaScript (mit jQuery)

// loops elements classed "places" and checks if their child "span" is too long to fit
$(".places").each(function (index, item) {
    var obj = $(item).find("span");
    if (obj.length) {
        var placename = $(obj).text();
        if ($(obj).width() > $(item).width() && placename.trim().length > 0) {
            var limit = 0;
            do {
                limit++;
                                    placename = placename.substring(0, placename.length - 1);
                                    $(obj).text(placename + "...");
            } while ($(obj).width() > $(item).width() && limit < 1000)
        }
    }
});

Answer 5

Sie können verwenden max-content um die Pixelbreite von Text zu messen.

Hier ist eine Nutzenfunktion, die das tut. Sie nimmt optional einen beliebigen Knoten als Kontext, um die Breite zu berechnen, unter Berücksichtigung aller CSS wie font-size , letter-spacing , usw.

function measureTextPxWidth(
  text,
  template = document.createElement("span")
) {
  const measurer = template.cloneNode();
  measurer.style.setProperty("all", "revert", "important");
  measurer.style.setProperty("position", "position", "important");
  measurer.style.setProperty("visibility", "hidden", "important");
  measurer.style.setProperty("width", "max-content", "important");
  measurer.innerText = text;

  document.body.appendChild(measurer);
  const { width } = measurer.getBoundingClientRect();
  document.body.removeChild(measurer);
  return width;
}

document.querySelector('.spanTextWidth').innerText = 
  `${measureTextPxWidth('one two three')}px`

document.querySelector('.h1TextWidth').innerText = 
  `${measureTextPxWidth('one two three', document.querySelector('h1'))}px`

h1 {
  letter-spacing: 3px;
}

<span>one two three</span>
<div class="spanTextWidth"></div>

<h1>one two three</h1>
<div class="h1TextWidth"></div>