居中文本和图标的按钮-PHP中文网问答

我正在开发一个带有图标和文本的按钮组件。

图标位于按钮的左侧，文本在按钮中间对齐。

如果文本无法适应按钮，它不应该换行，而是可以被截断。

截断文本的关键条件是，文本距离按钮边缘的距离应与图标距离按钮边缘的距离相同。

所以你不能在按钮中添加相等的内联填充。

如果文本没有被截断，它将在按钮中间对齐。

然而，一旦它开始重叠图标或无法适应按钮，文本将被截断。

换句话说，在正常状态下，图标的位置不变，但当文本没有足够的空间时，图标会将文本推到被截断的位置。

按钮的可视化示例

我尝试使用CSS来实现这个效果，但失败了。

最后，我为每个按钮添加了一个ResizeObserver，用于计算文本是否有足够的空间。

如果没有足够的空间，将应用不同的样式到图标上。

我的ResizeObserver解决方案，请尝试调整窗口大小

CodePen

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

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

const handleButtonResize = (entries) => {
  entries.forEach((entry) => {
    const { target } = entry;
    const text = target.querySelector(`.${CLASS_TEXT}`);
    const { width: widthButton } = entry.contentRect;

    if (!(text instanceof HTMLElement)) {
      return;
    }

    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);

[...buttons].forEach((button) => {
  resizeObserver.observe(button);
});

我的问题是：

是否可以使用纯CSS实现相同的效果？