Determine Pixel Length of String in JavaScript/Jquery

Determine Pixel Length of String in Javascript/jQuery?

Wrap text in a span and use jquery width()

Measuring length of string in pixel in javascript

The simplest solution is to create an in memory canvas (i.e. one that isn't added to the DOM) and then use the measureText function :

var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
ctx.font = "11px Arial";        
var width = ctx.measureText(str).width;

How to calculate the length (in pixels) of a string in JavaScript?

Given the new information about your wanting to append an ellipsis for text overflow, I think the text-overflow CSS property is a better approach. See this article on quirksmode for more information: http://www.quirksmode.org/css/textoverflow.html

Get string length in pixels with JavaScript

You can determine the number of pixels the container of the string. You can do this by creating a hidden element in the DOM, setting the inner HTML to the string and then asking for the width.

How do I get text width in pixels, using JavaScript or jQuery?

Simply wrap the text in a (invisible) span and use jQuerys .width() to get the width.

Note that you should not, like others said, use a div as it's a block-element - and depending on where/how you insert that, a block-element may auto-expand to the full available width and give bad results.

Calculate pixel width of text without knowing font in React/JavaScript

You can use measureText of canvas like below:

function getTextWidth(text, font) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

  context.font = font || getComputedStyle(document.body).font;

  return context.measureText(text).width;
}

You can just pass the font if you need to change it, it's basically a CSS font declaration.

function getTextWidth(text, font) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

  context.font = font || getComputedStyle(document.body).font;

  console.log(context.font);

  return context.measureText(text).width;
}

const elements = document.querySelectorAll('h1, h2, h3, h4, h5, h6');

elements.forEach(element => {
  console.log(getTextWidth(element.innerText, getComputedStyle(element).font));
});

h1, h2, h3, h4, h5, h6 {
  font-family: serif;
}

.sans-serif {
  font-family: sans-serif;
}

<h1>Hello, World</h1>
<h2>Hello, World</h2>
<h3>Hello, World</h3>
<h4>Hello, World</h4>
<h5>Hello, World</h5>
<h6>Hello, World</h6>
<h1 class="sans-serif">Hello, World</h1>
<h2 class="sans-serif">Hello, World</h2>
<h3 class="sans-serif">Hello, World</h3>
<h4 class="sans-serif">Hello, World</h4>
<h5 class="sans-serif">Hello, World</h5>
<h6 class="sans-serif">Hello, World</h6>

Get pixel length of String in Svg

I've been wondering this too, and I was pleasantly surprised to find that, according to the SVG spec, there is a specific function to return this info: getComputedTextLength()

// access the text element you want to measure
var el = document.getElementsByTagName('text')[3];
el.getComputedTextLength(); // returns a pixel integer

Working fiddle (only tested in Chrome): http://jsfiddle.net/jyams/

Calculate text width with JavaScript

Create a DIV styled with the following styles. In your JavaScript, set the font size and attributes that you are trying to measure, put your string in the DIV, then read the current width and height of the DIV. It will stretch to fit the contents and the size will be within a few pixels of the string rendered size.

var fontSize = 12;var test = document.getElementById("Test");test.style.fontSize = fontSize;var height = (test.clientHeight + 1) + "px";var width = (test.clientWidth + 1) + "px"
console.log(height, width);

#Test{    position: absolute;    visibility: hidden;    height: auto;    width: auto;    white-space: nowrap; /* Thanks to Herb Caudill comment */}

<div id="Test">    abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</div>

---

Related Topics