Как посчитать количество символов в строке, используя JavaScript

Question

Предположим, у меня есть div с шириной 200px и размером шрифта 16. Теперь я хочу вычислить количество символов, которые можно поместить в строку div.Как я могу рассчитать количество символов, используя JavaScript или jQuery.

Answer 1

Обновление: о, я пропустил скрытый комментарий.Вышеуказанное CSS-решение определенно лучше для этой работы.Мой ответ напрямую касается проблемы подсчета символов, которые помещаются в одну строку.Я не собираюсь удалять его, потому что кто-то может найти его полезным.

Определенно возможно получить количество символов, которое вы можете поместить в одну строку, даже если у вас пропорциональный шрифт.Есть два способа - использовать следующий трюк или метод measureText из CanvasRenderingContext2D.

var target_width = 200; // line width
var text = 'Lorem ipsum. I want to know how many chars of this text fit.';

var span = document.createElement('span');
document.body.appendChild(span);
span.style.whiteSpace = 'nowrap';
// define the style
span.style.fontFamily = 'Lucida Grande';
span.style.fontSize = '14px';

var fit = text.length;
for (var i = 0; i < fit; ++i) {
  span.innerHTML += text[i];
  if (span.clientWidth > target_width) {
    fit = i - 1;
    break;
  }
}

document.body.removeChild(span);

// fit = the number of characters of the text
//       that you can fit on one line

Answer 2

На самом деле я хочу обрезать свой текст внутри div, чтобы он точно вписался в этот div (длина текста очень большая)

Вы можете сделать это с помощью css:

white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis; //Doesn't work in all browsers, just adds "..."

http://jsfiddle.net/46AML/

Answer 3

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

Если вы гарантировали использование шрифта фиксированной ширины, вы можете рассчитать ширину одного символа, например, используя функция размещена в этом ответе .Затем просто разделите ширину <div> на ширину символа.