<p>아이콘과 텍스트가 포함된 버튼 구성요소를 개발 중입니다. </p> <p>아이콘은 버튼 왼쪽에 배치되고 텍스트는 버튼 중앙에 정렬됩니다. </p> <p>텍스트가 버튼 크기에 맞지 않으면 줄바꿈해서는 안 되지만 잘릴 수 있습니다. </p> <p>텍스트를 자르는 핵심 조건은 아이콘이 버튼 가장자리에서 떨어져 있는 것처럼 텍스트가 버튼 가장자리에서 떨어져 있어야 한다는 것입니다. </p> <p>따라서 버튼에 동일한 인라인 패딩을 추가할 수 없습니다. </p> <p>텍스트가 잘리지 않으면 버튼 중앙에 정렬됩니다. </p> <p>그러나 아이콘과 겹치기 시작하거나 버튼에 맞지 않으면 텍스트가 잘립니다. </p> <p>즉, 일반 상태에서는 아이콘의 위치가 그대로 유지되지만, 텍스트를 넣을 공간이 충분하지 않으면 아이콘이 텍스트를 잘린 위치로 밀어넣습니다. </p> <p>버튼의 시각적 예</p> <p>이 효과를 얻기 위해 CSS를 사용하려고 시도했지만 실패했습니다. </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 버튼 = 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(버튼); });</pre> <p><strong>제 질문은:</strong></p> <p>순수한 CSS를 사용하여 동일한 효과를 얻을 수 있나요? </p>