Как определить ширину текстовой строки в JS

Расширенные примеры измерения ширины текста

Измерение многострочного текста

Для текста, занимающего несколько строк, ширина обычно определяется самой длинной строкой. Можно разбить текст на строки и измерить каждую.

const multiline = 'Первая строка\nВторая, более длинная строка\nТретья';
const lines = multiline.split('\n');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.font = '14px Arial';
const widths = lines.map(line => ctx.measureText(line).width);
const maxWidth = Math.max(...widths);
console.log('Максимальная ширина:', maxWidth);

Максимальная ширина: 156.5

Измерение текста с разными шрифтами

Необходимо учитывать, что шрифт может быть разным для разных частей текста. В таком случае измерение проводится для каждого фрагмента отдельно.

const parts = [
  { text: 'Жирный', font: 'bold 16px Arial' },
  { text: ' Курсив', font: 'italic 16px Times' }
];
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
let totalWidth = 0;
parts.forEach(part => {
  ctx.font = part.font;
  totalWidth += ctx.measureText(part.text).width;
});
console.log('Общая ширина:', totalWidth);

Общая ширина: 87.2

Кэширование измерений для повышения производительности

Если требуется многократно измерять один и тот же текст, результат можно сохранять в переменной или Map.

const cache = new Map();
function getTextWidth(text, font) {
  const key = text + '|' + font;
  if (cache.has(key)) return cache.get(key);
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.font = font;
  const width = ctx.measureText(text).width;
  cache.set(key, width);
  return width;
}
console.log(getTextWidth('Привет', '14px Arial'));
console.log(getTextWidth('Привет', '14px Arial')); // из кэша

35.2 (дважды выведется одно и то же)

Измерение с учётом letter-spacing и word-spacing

Canvas API не учитывает CSS-свойства letter-spacing и word-spacing, поэтому при необходимости их нужно добавлять вручную.

function measureTextWithSpacing(text, font, letterSpacing = 0, wordSpacing = 0) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.font = font;
  let width = 0;
  for (let i = 0; i < text.length; i++) {
    width += ctx.measureText(text[i]).width;
    if (text[i] === ' ') width += wordSpacing;
    if (i < text.length - 1) width += letterSpacing;
  }
  return width;
}
console.log(measureTextWithSpacing('Hello World', '16px Arial', 1, 4));

95.2

Сравнение точности canvas и DOM-элемента

Оба метода дают близкие результаты, но canvas может отличаться из-за округления. Проверка:

const text = 'Тест';
const font = '20px Arial';
// Canvas
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.font = font;
const cWidth = ctx.measureText(text).width;
// DOM
const span = document.createElement('span');
span.textContent = text;
span.style.font = font;
span.style.position = 'absolute';
span.style.visibility = 'hidden';
document.body.appendChild(span);
const dWidth = span.getBoundingClientRect().width;
document.body.removeChild(span);
console.log('Canvas:', cWidth, 'DOM:', dWidth);

Canvas: 36.3 DOM: 36.3 (обычно совпадают)

Измерение ширины текста до его рендеринга в браузере

Это полезно для адаптивной верстки, когда нужно определить, поместится ли текст в контейнер.

function canFit(text, maxWidth, font) {
  const width = getTextWidth(text, font); // функция из предыдущих примеров
  return width <= maxWidth;
}
console.log(canFit('Длинный текст, который не поместится', 100, '12px Arial'));

false