アイコンとテキストを含むボタンコンポーネントを開発しています。

アイコンはボタンの左側に配置され、テキストはボタンの中央に配置されます。

テキストがボタンに収まらない場合は、折り返さずに切り詰めてください。

テキストを切り詰める重要な条件は、テキストがボタンの端からアイコンまでの距離と同じ距離にあることです。

そのため、ボタンに均等なインライン パディングを追加することはできません。

テキストが切り詰められない場合は、ボタンの中央に配置されます。

ただし、アイコンに重なったり、ボタンに収まりきらなかったりすると文字が切れてしまいます。

つまり、通常の状態ではアイコンの位置は変更されませんが、テキストを配置するための十分なスペースがない場合、アイコンはテキストを切り捨てられた位置に押し込みます。

ボタンの視覚的な例

CSS を使用してこの効果を実現しようとしましたが、失敗しました。

最後に、テキストに十分なスペースがあるかどうかを計算する ResizeObserver を各ボタンに追加しました。

十分なスペースがない場合は、アイコンに別のスタイルが適用されます。

私の ResizeObserver ソリューション、ウィンドウのサイズを変更してみてください

コードペン

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(ボタン); });

私の質問は次のとおりです:

純粋な CSS を使用して同じ効果を実現することは可能ですか?