javascript - JS：检查文本是否超过容器宽度

Question

是否有一个 js 或 jQuery 函数可以检测 innerHTML 或文本是否在被其容器剪切的某个像素数内？

我需要为页面上的几百个元素执行此操作，因此性能有点重要。

示例 - 确定其中的文本<td>是否在超过其宽度的 5px 内：

<td class="cell">
  12,3423
</td>

.cell {
   width: 20px;
}

Answer 1

试试这个

$.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;
};

$(function(){
   alert($('.cell').textWidth());    
});

小提琴http://jsfiddle.net/Hpyay/

计算文本宽度可能重复（以及从上面复制的代码）

Answer 2

你需要包裹一些东西（p，div等等）然后你得到那个元素的宽度/高度

 <td><p>text...</p></td>

进行计算$("td>p").width()

但如果它只是文本或图像（带有max-width:100%），除非你不换行......