javascript - JS：テキストがコンテナの幅を超えていないか確認してください

Question

innerHTMLまたはテキストがコンテナによってクリップされないように特定のピクセル数内にあるかどうかを検出するjsまたはjQuery関数はありますか？

ページ上の数百の要素に対してこれを行う必要があるため、パフォーマンスは少し重要です。

例-この中のテキストが<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%ただし、ラップしない限り、テキストのみまたは画像（ 付き）の場合...