国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

<p>アイコンとテキストを含むボタンコンポーネントを開発しています。 </p> <p>アイコンはボタンの左側(cè)に配置され、テキストはボタンの中央に配置されます。 </p> <p>テキストがボタンに収まらない場合は、折り返さずに切り詰めてください。 </p> <p>テキストを切り詰める重要な條件は、テキストがボタンの端からアイコンまでの距離と同じ距離にあることです。 </p> <p>そのため、ボタンに均等なインライン パディングを追加することはできません。 </p> <p>テキストが切り詰められない場合は、ボタンの中央に配置されます。 </p> <p>ただし、アイコンに重なったり、ボタンに収まりきらなかったりすると文字が切れてしまいます。 </p> <p>つまり、通常の狀態(tài)ではアイコンの位置は変更されませんが、テキストを配置するための十分なスペースがない場合、アイコンはテキストを切り捨てられた位置に押し込みます。 </p> <p>ボタンの視覚的な例</p> <p>CSS を使用してこの効果を?qū)g現(xiàn)しようとしましたが、失敗しました。 </p> <p>最後に、テキストに十分なスペースがあるかどうかを計算する ResizeObserver を各ボタンに追加しました。 </p> <p>十分なスペースがない場合は、アイコンに別のスタイルが適用されます。 </p> <p>私の ResizeObserver ソリューション、ウィンドウのサイズを変更してみてください</p> <p>コードペン</p> <pre class="brush:php;toolbar:false;">const CLASS_TEXT = `button__text`; const CLASS_NO_FREE_SPACE = `button_no-free-space`; const FREE_SPACE_SIZE = 70; const button = document.querySelectorAll(`.${CLASS_ROOT}`); const handleButtonResize = (エントリ) => { エントリ.forEach((エントリ) => { const {ターゲット} = エントリ; const text = target.querySelector(`.${CLASS_TEXT}`); const {幅:幅ボタン} =entry.contentRect; if (!(HTMLElement のテキスト インスタンス)) { 戻る; } const widthText = text.offsetWidth; const freeSpaceLeft = (widthButton - widthText) / 2; const noFreeSpace = freeSpaceLeft <= FREE_SPACE_SIZE; target.classList.toggle(CLASS_NO_FREE_SPACE, noFreeSpace); }); }; constsizeObserver = new ResizeObserver(handleButtonResize); [...ボタン].forEach((ボタン) => { サイズ変更Observer.observe(ボタン); });</pre> <p><strong>私の質(zhì)問は次のとおりです:</strong></p> <p>純粋な CSS を使用して同じ効果を?qū)g現(xiàn)することは可能ですか? </p>