JavaScript - Web フロントエンドは、コンテンツの長さが 2 行であるかどうかをどのように判断しますか? (画面幅が異なる場合)

Question

さまざまな画面サイズでテキストが占める行数を計算する方法はありますか? 図にあるように、携帯電話の画面幅の下2行を超える場合は全文表示されますが、それ以外の場合は全文表示されません。

我想大声告诉你 · Answer

外側のレイヤーでフレックスレイアウトを使用し、高さの行数を設定するか、外側のレイヤーで最大高さmax-heightを指定します
内側のレイヤーのpにテキストを配置し、通常どおり表示します

リーリー

html構造:

リーリー

次に、2 人の身長を判断します:

リーリー

今度は「もっと見る」が表示されます

给我你的怀抱 · Answer

行の高さに基づいて判断するという考え方です。行の高さが 1 行の高さよりも大きい場合は、コンテンツが 2 行あることを意味します。コードは次のとおりです:

htmlは次のとおりです:

リーリー

jsは以下の通りです:

リーリー

コーディングは簡単ではありませんが、気に入ったらいいねしてください〜

阿神 · Answer

次に行の高さを判断します

巴扎黑 · Answer

現在のテキストには別の dom があり、その高さと行の高さを取得して動的に計算する必要があります

曾经蜡笔没有小新 · Answer

アイデアを提供するには、行の高さを 20px に設定し、ページがレンダリングされた後、js のノードの offsetHeight 属性を使用します。offsetHeight / 20は行数です

过去多啦不再A梦 · Answer

使う

リーリー

以上です