JavaScript：外側のオブジェクトの寸法に基づいてテキストを切り捨てる

Question

JavaScriptを使用して、テキストが存在するオブジェクトに合わせて特定のテキストを切り取り、最後に「...」を追加します。

例： JavaScriptはサードパーティのWebサービスからデータを取得したため、200 x 300 px divにテキストを配置する必要があります。テキストの長さは変わるので、提供されるスペースよりもはるかに多くのスペースが必要です。

どの点でテキストが境界線を突き破ってテキストを切り詰め、最後に "..."を追加するかを決定する方法はありますか？

Answer 1

これを行うことができるseveral jQuery pluginsがあります。

Answer 2

キャンバス要素を使用しても構わない場合は、テキストの幅を測定するために使用できます。ここでは例です：

http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-excanvas.js/demo/8_2_canvas_measureText.html

Answer 3

ruzee.com prototype.js、あなたがやりたい[MITがライセンス]コードの小さなビットを使用していますhas a solution。 demo

Answer 4

CSS3のプロパティtext-overflowも参照してください。これも同様です。

http://www.w3.org/TR/2001/WD-css3-text-20010517/#text-overflow-props

これは、ブラウザがそれをサポートしているかどうかを確認することができますので、あなたは常にJavaScriptをフォールバックを追加することができます。

if (!'textOverflow' in document.createElement('div').style) { 
    // Use JavaScript solution here 
}