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

JQuery:

(function($) {

 $.textMetrics = function(el) {

  var h = 0, w = 0;

  var div = document.createElement('div');
  document.body.appendChild(div);
  $(div).css({
   position: 'absolute',
   left: -1000,
   top: -1000,
   display: 'none'
  });

  $(div).html($(el).html());
  var styles = ['font-size','font-style', 'font-weight', 'font-family','line-height', 'text-transform', 'letter-spacing'];
  $(styles).each(function() {
   var s = this.toString();
   $(div).css(s, $(el).css(s));
  });

  h = $(div).outerHeight();
  w = $(div).outerWidth();

  $(div).remove();

  var ret = {
   height: h,
   width: w
  };

  return ret;
 }

})(jQuery);

Answer 2

El ExtJS-Javascript-Bibliothek hat eine großartige Klasse namens Ext.util.TextMetrics, die "präzise Pixelmaße für Textblöcke liefert, so dass Sie genau bestimmen können, wie hoch und breit, in Pixeln, ein bestimmter Textblock sein wird". Sie können die Klasse entweder direkt verwenden oder den Quellcode ansehen, um zu sehen, wie das gemacht wird.

http://docs.sencha.com/extjs/6.5.3/modern/Ext.util.TextMetrics.html

Answer 3

Dafür habe ich ein kleines Tool geschrieben. Vielleicht ist es für jemanden nützlich. Es funktioniert ohne jQuery .

https://github.com/schickling/calculate-size

Verwendung:

var size = calculateSize("Hello world!", {
   font: 'Arial',
   fontSize: '12px'
});

console.log(size.width); // 65
console.log(size.height); // 14

Fiedel: http://jsfiddle.net/PEvL8/

Answer 4

<span id="text">Text</span>

<script>
var textWidth = document.getElementById("text").offsetWidth;
</script>

Dies sollte funktionieren, solange auf den <span>-Tag keine anderen Stile angewendet werden. offsetWidth umfasst die Breite aller Ränder, horizontalen Auffüllungen, vertikalen Bildlaufleisten usw.

Answer 5

Sie können die Leinwand verwenden, damit Sie sich nicht so sehr mit CSS-Eigenschaften beschäftigen müssen:

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "20pt Arial";  // This can be set programmaticly from the element's font-style if desired
var textWidth = ctx.measureText($("#myElement").text()).width;