JavaScript で幅に合わせて文字列を切りつめる - Psychs's blog

デスクトップアプリを開発してると、ListView のカラム幅が足りなくなったときに「My Docume...」のように自動的に末尾を「...」で埋めて切りつめてくれる機能がある。ウェブでも同じことをやりたかったので、作ってみた。 まず、文字列の幅を測定するには、 <span id="ruler" style="visibility:hidden;position:absolute;"> </span> みたいな隠しエレメントを用意しておいて、 String.prototype.getExtent = function(ruler) { var e = $(ruler); var c; while (c = e.lastChild) e.removeChild(c); var text = e.appendChild(document.createTextNode(this)); var

[mirrored]

text-overflow:ellipsis;的なもの

[labocho]

文字列幅取得

[hoPPen]

参考に

[efcl]

幅にあった文字列を取り出す。 隠した要素に文字列入れて、offsetWidthで切る

[kijtra]

なんで「var e = $(ruler);」のとこだけjQueryなんだろ。「var e = document.getElementById(ruler);」にしないと動かないよね。

[bindi]

なるほど！って思った。感謝。

[shokai]

offsetWidth

[toton]

テキストの省略 css:"text-overflow: ellipsis;". firefox http://www.jide.fr/emulate-text-overflowellipsis-in-firefox-with-css

[webmarksjp]

Javascript

[monjudoh]

幅に合わせて文字列を切り詰め～…にする。IEとOperaではCSSの「text-overflow: ellipsis;」でいけるそうな。

[vv_boow_vv]

　幅狭なサイドカラムから文字が溢れそうなときに使えそう！

[kazuhooku]

ベンチマークと(必要ならば)最適化する

[kixx_me_tender]

ちょっと処理が多い、かなー。たくさん表示する時はきつそうな気がする。元の文字数が多いときとか。cssでの対応を待ちたいところ。

[bluerabbit]

長い文字列は途中で略して ... にしてしまう方法。 IE専用ならtext-overflow:ellipsisでいけるらしい

[nakao_mitsuteru]

「'日本語も平気'.truncateTailInWidth(60, 'ruler'); // => 日本...」

[soltiox]

文字幅

[Aoba]

ウインドウサイズに合わせてページをめくるようなテキスト表示もこれでできるかな。そんな要望をWebに対して持つのって出版関係の人だけだけど。

[saladdays]

文字数が一定以上超えたら「…」を表示

[hiro-rock]

文字列を指定した長さに省略する

[mattarin]

超クール

[hiro_y]

JavaScriptで「～...」を実現。IEならCSSの「text-overflow: ellipsis;」で実現可能。

[sawat]

text-overflow:ellipsisはIE専用なので、overflow:hiddenを使って実現することはできないかな？「…」をつけるつけないが無理か。

[eclucifer]

長文を省略表示する JavaScript 。

[nitoyon]

JSの力で ... を実現。１つずつ試す力技。/IE専用ならtext-overflow:ellipsisでいける（GMailは使ってた）。

[kits]

ブックマークコメントより text-overflow:ellipsis を知りました。

[sasada]

よく考えると実用的。忘れた頃にソースを見ても意味が分かる点もプラス。

[wacky]

物理的な幅に従って長い文字列の後ろを切り捨てる方法。切り捨てた個所は「...」で埋める。

[sqrt]

それスタイルシート（text-overflow:ellipsis;）で……IE専用だけど。Operaも-o-text-overflow:ellipsis;でいける。あ、ということはFxも-moz-text-overflow:ellipsis;で……？

[koyhoge]

styleも考慮するともう少しめんどう?

[CAMUS]

長い文字列は途中で略して ... にしてしまう方法