Java Scriptで html 表示が携帯の幅に縮小したときの動作を追加したい

Question

表題の件で、

★質疑の概要と目的：：

window上に、表示されているページの文字数(例として５０文字以上）を減らして、(例として、１０文字以内に減らして）、その最後に、”・・・・”を表示して、「もっと見る」のアイコンを追加、表示させたい；
といった標準的なscript作成をご指導ください。

１）縮小時のEventをどのように得るか分からない？
２）文字数を減らす方法を知りたい
３）アイコンを追加する方法

以上、自分のページに、携帯用の「見やすいページ化」を実施したいのです。
参考：小生、 CSS,HTMLは、よく分かるのですが、JAVA SCRIPT については、まだ、初歩です。よろしく願います。

Answer 1

jsFiddleで書いてみました。
例外処理やデザインは捨てています。
jQueryなどライブラリを使えばもう少し簡潔で分かりやすい処理になると思います。

Comments

[退会済みユーザー]

始めまして・・早速の回答ありがたく受けさせていただきました。　素晴らしい回答で、驚いております。　

さて、ひとつだけ、出来ましたら、教えていただきたいのですが、質問内容の、「１）縮小時のEventをどのように得るか分からない？」　の件が、分かれば良いな・・と思っています。　「今作動させてみて、とてもよく動いており、希望どうりの回答です。ありがとうございました。」
上に書いた希望は、
　いわゆる、ホームページで見ていて、携帯の人が見にきたときに、@media(min-width:768px)などのメディアクエリーに依って縮小したときに、ここで回答された、内容を（紹介していただいたページを）起動するように、変更したいのです。　もう、９０％これで出来ていますが、その辺の、Document Object の　イベントをGetする方法は、あるのでしょうか？　
お手数をかけて申し訳ございませんが、出来たら、お願いしたいのです。
以上です。　　

[htsign]

なるほど。ウィンドウサイズの変更ということであれば、resizeイベントというものがあります。
window.addEventListener("resize", 実行したい関数, false);

ただ、メディアクエリでのレイアウト変更では発火しないのではないですかね…。

横幅を省略するのが目的であれば、
text-overflow:ellipsis
を適応させた方がベターかと思います。
メディアクエリ使っているということはCSS3前提でしょうし。

[退会済みユーザー]

今日は、本当にお世話様になりました。　よく分かりましたので、この方式で利用させていただきます。　本当に、丁寧な回答、心より御礼申し上げます。　今後ともよろしくお願いいたします。