중앙에 텍스트와 아이콘이 있는 버튼

Question

아이콘과 텍스트가 포함된 버튼 구성요소를 개발 중입니다.

아이콘은 버튼 왼쪽에 배치되고 텍스트는 버튼 중앙에 정렬됩니다.

텍스트가 버튼 크기에 맞지 않으면 줄바꿈해서는 안 되지만 잘릴 수 있습니다.

텍스트를 자르는 핵심 조건은 아이콘이 버튼 가장자리에서 떨어져 있는 것처럼 텍스트가 버튼 가장자리에서 떨어져 있어야 한다는 것입니다.

따라서 버튼에 동일한 인라인 패딩을 추가할 수 없습니다.

텍스트가 잘리지 않으면 버튼 중앙에 정렬됩니다.

그러나 아이콘과 겹치기 시작하거나 버튼에 맞지 않으면 텍스트가 잘립니다.

즉, 일반 상태에서는 아이콘의 위치가 그대로 유지되지만, 텍스트를 넣을 공간이 충분하지 않으면 아이콘이 텍스트를 잘린 위치로 밀어넣습니다.

버튼의 시각적 예

이 효과를 얻기 위해 CSS를 사용하려고 시도했지만 실패했습니다.

마지막으로 텍스트를 위한 충분한 공간이 있는지 계산하는 ResizeObserver를 각 버튼에 추가했습니다.

공간이 충분하지 않으면 아이콘에 다른 스타일이 적용됩니다.

내 ResizeObserver 솔루션, 창 크기를 조정해보세요

코드펜

const CLASS_TEXT = `button__text`;
const CLASS_NO_FREE_SPACE = `button_no-free-space`;
const FREE_SPACE_SIZE = 70;

const 버튼 = document.querySelectorAll(`.${CLASS_ROOT}`);

const handlerButtonResize = (항목) =>
  항목.forEach((항목) => {
    const { 대상 } = 항목;
    const text = target.querySelector(`.${CLASS_TEXT}`);
    const { 너비: widthButton } = 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);
  });
};

const resizeObserver = new ResizeObserver(handleButtonResize);

[...버튼].forEach((버튼) => {
  resizeObserver.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

으아악 으아악