モバイル デバイスに表示されるテキストの量を制限できるようにする必要があります。私たちは、HTML 要素を含む div でいくつかの JS を呼び出すさまざまな「続きを読む」プラグイン ( http://plugins.learningjquery.com/expander/index.htm ) と同様の方法でこれを行うことを望んでいました。
問題は、大きなデバイスのテキストでこれらのライブラリを呼び出したくないということです。新しいライブラリ (Respond.js など) を導入せずに、一部の CSS と組み合わせてメディアクエリを使用することは可能ですか?
モバイル デバイスでテキストを制限し、[続きを読む] リンクを提供するためのより良い方法はありますか?
編集:メディアクエリを使用して、特定の幅を既に処理しています。しかし、テキストを含むコンテナーをインテリジェントな方法で切り捨てたいと考えています。モバイル デバイスを使用していて、div に 1000 語が含まれている場合、100 語を表示してから、テキストを展開する [続きを読む] ボタンを表示します。ウィンドウのサイズを変更すると、このボタンと切り捨てがシームレスに消える必要があります。
私たちが今持っているものは次のとおりです。
- ページの読み込み時に、コンテンツ div (切り捨てたいテキストを含む div) 内のすべてをその上の div にコピーします。
- 最大幅のメディア クエリを使用してその content-div を非表示にし、新しいものを表示します。JS を使用して、新しい div 要素内のテキストを切り捨てます。
- 新しい div の最後にボタンを追加して、新しい div を隠し、古いものを表示します。
これを処理するより良い方法はありますか？