テキストとアイコンが中央に配置されたボタン

Question

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

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

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

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

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

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

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

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

ボタンの視覚的な例

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 を使用して同じ効果を実現することは可能ですか?

Answer 1

アイコンの幅は常に同じ(2em)なので、右側のスペースバランスをとるための「バッファ」として::after疑似要素を使用できます。 。

.button__icon をフレキシブル レイアウト フローに設定します。これは、他の要素を「プッシュ」するときに重要です。 margin-right を指定して、ボタンの左パディングのバランスをとります。

flex-basis: calc(2em 20px) を使用して ::after 疑似要素を作成します。このうち、2em は .button__icon の幅、20px は .button__icon## の margin-right です。 ＃。これにより、.button__text が短い場合に、左右のスペースのバランスがとれます。

justify-content: space-between

を親要素に適用して、.button__icon、.button__text、::after# のバランスを整えます ##.button__text が短い場合。 flex-shrink: 999

という大きな縮小率を追加して、

.button__text が長い場合にレイアウト エンジンが最初に ::after 要素を縮小します。

リーリー リーリー