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?