問題タブ [dotdotdot]

jQuery、Modernizr、およびいくつかのプラグイン (jQuery.dotdotdot、MixItUp) を使用してサイトを設計しています。ベースとして、codyhouse からこの作品を選びました。そのため、MixItUp 機能 (フィルタリング) はうまく機能し、問題はありません。

<img>問題は、元を aに置き換えて<div>コンテンツを追加したいときに発生します。テキストがオーバーフローする可能性があるため、jQuery.dotdotdot プラグインを追加して、このテキストを適切にトリミングしました。したがって、カスタム JavaScript コードを追加しました。

これは非常に簡単だと思います。メニューをトリガーすると、すべてのボックスが適切に整列されてきれいになりますが、折りたたむと、jQuery.dotdotdot によってトリミングされたテキストがすべてのグリッドを台無しにします。それらを取り除く方法は？

以下に、いくつかのサンプル データを含むスニペットを作成しました :-)

`dotdotdot1 ディレクティブで再現するのが非常に難しい奇妙な問題があります。

しかし、サーバーからスコープ変数を取得する前に呼び出されることがあるので、その動作は本当に奇妙です...

タイムアウトを使用する必要があるというアイデアがあります...

しかし、どうすれば使用できますか？私が設定した場合

それも奇妙な方法で動作するより...

ディレクティブの実行を正しく設定するにはどうすればよいですか?

私は dotdotdot を使用していますが、クールなプラグインのようです...

だから私はangular-dotdotdotがあることを発見しました...それを使用する方法? あまり明確ではありません...

次のような dotdotdot の古典的な使用法があるとします。

angularでそれを使用する方法は？

彼らのドキュメントでは

テンプレート：

しかし、オプションを設定する方法は？

私のコードの例は次のとおりです。

そして私はそのようなjQueryコードを使用します:

そしてCSS：

しかし、結果として私は得る：

結果として、私はこれを達成したい:

純粋なcssまたはdotdotdot.jsで可能ですか? 単語 (文) がその親と一致できない場合: 単語 (文) が親の単語ごとに一致する場合は、デフォルトの 1 行のテキスト オーバーフローのみを表示します - その後、一致し、文字ハイフネーションはありません!

そのため、コンテナを高さで拡張したくありません（大量のデータがあります。これは単なる例です。一部のブロックをハードコーディングできませんでした）

https://plnkr.co/edit/IxS0CReJicRfDdeGpoPo?p=preview

dotdotdot プラグインを使用して、最初の終止符でテキストを切り捨てようとしています。しかし、私はそれを機能させることはできません。試してみword-wrap: break-word;ましたが、うまくいきませんでした。最初のピリオドでテキストを切り取る方法は?

これらのオプションを設定しました：

私の例

dotdotdotプラグインを使用してテキストを切り取っています。

問題は、低速のデバイスでは、フォーマットされていない出力がフラッシュされることです。テキスト全体がロードされ、しばらくすると dotdotdot が起動して切断されます。例を見たい場合は、スマートフォンなどでサイトを開いてください。最初の例のブロックでは、両方のブロックが完全なテキストを取得し、しばらくしてから右側のブロックが切り取られます。

これを防ぐためにできることはありますか？

私はいくつかの奇妙な問題で立ち往生しており、ここで助けが得られることを願っています.

スパンと div タグで囲まれたアンカー タグ内に複数行のテキストがあります。このテキストに省略記号を追加するプラグイン「dotdotdot」を追加しました。Firefox では正常に動作しますが、クロムではアンカー タグが完全に削除されます。

テスト用に作成したjsfiddleリンクは次のとおりです https://jsfiddle.net/trupti11/0p7jf56m/6/

出力ウィンドウの幅をモバイル サイズ (約 360px 以下) に変更すると、テキストが消えることがわかります。

問題は何ですか？

サンプルコードはこちら

HTML

Javascript

CSS

助けてくれてありがとう。