Schaltfläche mit zentriertem Text und Symbol

Question

Ich entwickle eine Schaltflächenkomponente mit einem Symbol und Text.

Das Symbol wird auf der linken Seite der Schaltfläche platziert und der Text wird in der Mitte der Schaltfläche ausgerichtet.

Wenn der Text nicht in die Schaltfläche passt, sollte er nicht umgebrochen werden, sondern kann abgeschnitten werden.

Die wichtigste Bedingung für das Abschneiden von Text ist, dass der Text den gleichen Abstand vom Rand der Schaltfläche haben sollte wie das Symbol vom Rand der Schaltfläche.

Sie können also keine gleichmäßige Inline-Auffüllung in Schaltflächen hinzufügen.

Wenn der Text nicht abgeschnitten ist, wird er in der Mitte der Schaltfläche ausgerichtet.

Sobald der Text jedoch das Symbol überlappt oder nicht mehr in die Schaltfläche passt, wird er abgeschnitten.

Mit anderen Worten: Im Normalzustand bleibt die Position des Symbols unverändert, aber wenn nicht genügend Platz für den Text vorhanden ist, verschiebt das Symbol den Text an die abgeschnittene Position.

Visuelles Beispiel einer Schaltfläche

Ich habe versucht, CSS zu verwenden, um diesen Effekt zu erzielen, aber es ist mir nicht gelungen.

Zuletzt habe ich zu jeder Schaltfläche einen ResizeObserver hinzugefügt, der berechnet, ob genügend Platz für den Text vorhanden ist.

Wenn nicht genügend Platz vorhanden ist, wird ein anderer Stil auf das Symbol angewendet.

Meine ResizeObserver-Lösung, versuchen Sie, die Größe des Fensters zu ändern

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 = (Einträge) =>
  Einträge.forEach((entry) => {
    const { Ziel } = Eintrag;
    const text = target.querySelector(`.${CLASS_TEXT}`);
    const { width: widthButton } = enter.contentRect;

    if (!(Textinstanz von HTMLElement)) {
      zurückkehren;
    }

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

Meine Frage ist:

Ist es möglich, den gleichen Effekt mit reinem CSS zu erzielen?

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元素。

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  padding: 20px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: auto 0;
}

.button {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  outline: none;
  border: 1px solid #808080;
  padding: 20px;
  width: 100%;
  background-color: transparent;
  min-height: 80px;
}

.button::before {
  content: "";
  width: 1px;
  position: absolute;
  top: 0;
  left: 50%;
  bottom: 0;
  background-color: red;
}

.button::after {
  flex: 0 999 calc(2em + 20px);
  content: "";
}

.button__icon {
  flex-shrink: 0;
  margin-right: 20px;
}

.button__text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  text-align: center;
  border: 1px solid blue;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"/>

<div class="grid">
  <button class="button">
    <i class="fa-solid fa-heart fa-2xl button__icon"></i>
   
    <span class="button__text">
      长文本，应该被截断
    </span>
  </button>

  <button class="button">
    <i class="fa-solid fa-thumbs-up fa-2xl button__icon"></i>
   
    <span class="button__text">
      中等长度
    </span>
  </button>

  <button class="button">
    <i class="fa-solid fa-house fa-2xl button__icon"></i>
   
    <span class="button__text">
      短
    </span>
  </button>
</div>