開発プロセスでは、テキストコンテンツが短い場合はすべてのコンテンツをページに表示したい、テキストコンテンツが長い場合は余分な部分を強調表示したい、という要望がよくあります。マウスをホバーすると、プロンプトが要求され、すべてのテキスト コンテンツがプロンプト ボックスに表示されます。
私たちのプロジェクトでは element-ui が導入されたため、通常は el-tooltip を使用してテキスト プロンプト ボックスを実装します。
製品が xx 文字を超えていることを示すと、その文字がマークされ、マウスがスライドしてすべての文字を入力するように求められ、一般的な処理は次のようになります。
1. テキストの長さを判断して、el-tooltip の表示と非表示を制御し、CSS スタイルでテキストのドットを制御します。
このように、テキスト内容がすべて漢字ではなく、数字や英語である場合があります。このとき、テキスト内容は 10 文字を超えている可能性がありますが、省略記号は表示されませんが、マウスをホバーすると、プロンプトが表示されますボックスが表示されます。
この問題を解決するには、もちろん解決方法があります2. 文章の長さを判断して、ページ内に表示される文字数を強制的に制限し、余分な部分には省略記号を表示します。次の方法を使用します。
この方法は、ほとんどのシナリオとニーズをすでに満たしています。X 文字を超えると省略記号が表示され、マウスをスライドさせるとコンテンツが表示されます~
次に、現在そのような需要がある場合: 今、テキストがありますが、何文字になるかわかりません。文字数は非常に長い場合もあれば、非常に短い場合もあり、製品が何文字になるかはわかりません。文字が表示されるはずです。それを実現していただければと思います。 ,特定の領域に、この領域の幅は画面サイズに応じて変化します。テキストの長さがその領域の幅より大きい場合、省略記号が表示されますマウスをスライドさせると、テキストの内容全体をプロンプトするプロンプト ボックスが表示されますが、テキストの内容が非常に小さい場合は、プロンプト ボックスを表示せずにすべての内容が表示されます。
現時点では上記のどちらの方法でも実現できないのですが、どうすればよいでしょうか？?
実は、最終的なテキストコンテンツの実際の幅 widthA と、テキストコンテンツを囲むボックスの実際の幅 widthB を取得し、両者を判定する方法がまだあります。ツールチップ。
したがって、テキスト コンテンツをラップするボックスに対してテキスト オーバーフロー表示の省略記号処理を実行し、mouseenter イベントを通じてテキストの実際の実際の幅と、テキスト コンテンツをラップするボックスの実際の幅を取得し、その 2 つを比較して制御することができます。最終的な効果を実現するための、比較結果の無効な属性に基づく el-tooltip 。
アイデアが決定したら、必要に応じてコンポーネントをカプセル化して使用できます。
これを使用する場合、テキスト コンテンツと必要な el-tooltip スタイルを渡すだけでよく、幅が異なる画面上やテキスト幅が不確かな場合でも、mouseenter イベントを通じてリアルタイムでscrollWidth と offsetWidth を取得します。同じ効果です。
例えば：
ページへの実装効果:
プラン名のテキスト コンテンツがコンテンツ領域の幅を超えない場合、マウスをスライドさせてもテキストのコピーを求めるプロンプトは表示されません。
ソリューション名が長すぎて大きすぎる場合は、マウスをロールオーバーするとプロンプトのコピーが表示されます。
このコンポーネントを使用すると、ドットやプロンプトのテキスト情報の必要性を超えてテキストを適応させることができます~
最後に、scollWidth、clientWidth、offsetWidth の違いを確認してみましょう。
scrollWidth: エッジの幅を除く、オブジェクトの実際のコンテンツの幅は、オブジェクト内のコンテンツが表示領域を超えると増加します。
clientWidth: スクロール バーやその他の端を除く、オブジェクト コンテンツの表示領域の幅は、オブジェクトの表示サイズが変化すると変化します。
offsetWidth: スクロール バーやその他の端を含むオブジェクト全体の実際の幅は、オブジェクトの表示サイズが変化すると変化します。