중앙에 텍스트와 아이콘이 있는 버튼
<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>
