html - 如何获得空白的宽度？

Question

我有一个函数可以将字符串切割成精确的宽度，我们称之为cut()

cut('abcd',3) = 'abc'

我使用的字体系列是Arial

但是当我计算每个字符的宽度时，我发现whitespace很奇怪。

<span id='x'> </span>

当我使用时，$("#x").width()我得到了 0.0

注意whitespace不是&nbsp

为什么' ' = 0.0但在'a b' that ' ' != 0.0

whitespacein的规则是HTML什么？

Answer 1

您可以使用white-space: pre;来强制空间在写入时呈现：

#x {
  white-space: pre;
}

我得到一个宽度：http 4px: //jsfiddle.net/qgeUZ/1/

Answer 2

试试这个，就像这里的特色：计算文本宽度

$.fn.textWidth = function(){
      var html_org = $(this).html();
      var html_calc = '<span>' + html_org + '</span>';
      $(this).html(html_calc);
      var width = $(this).find('span:first').width();
      $(this).html(html_org);
      return width;
    };

//剪切函数