Heim  >  Fragen und Antworten  >  Hauptteil

Schaltfläche mit zentriertem Text und Symbol

<p>Ich entwickle eine Schaltflächenkomponente mit einem Symbol und Text. </p> <p>Das Symbol wird auf der linken Seite der Schaltfläche platziert und der Text wird in der Mitte der Schaltfläche ausgerichtet. </p> <p>Wenn der Text nicht in die Schaltfläche passt, sollte er nicht umgebrochen werden, sondern kann abgeschnitten werden. </p> <p>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. </p> <p>Sie können also keine gleichmäßige Inline-Auffüllung in Schaltflächen hinzufügen. </p> <p>Wenn der Text nicht abgeschnitten ist, wird er in der Mitte der Schaltfläche ausgerichtet. </p> <p>Sobald der Text jedoch das Symbol überlappt oder nicht mehr in die Schaltfläche passt, wird er abgeschnitten. </p> <p>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. </p> <p>Visuelles Beispiel einer Schaltfläche</p> <p>Ich habe versucht, CSS zu verwenden, um diesen Effekt zu erzielen, aber es ist mir nicht gelungen. </p> <p>Zuletzt habe ich zu jeder Schaltfläche einen ResizeObserver hinzugefügt, der berechnet, ob genügend Platz für den Text vorhanden ist. </p> <p>Wenn nicht genügend Platz vorhanden ist, wird ein anderer Stil auf das Symbol angewendet. </p> <p>Meine ResizeObserver-Lösung, versuchen Sie, die Größe des Fensters zu ändern</p> <p>CodePen</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 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); });</pre> <p><strong>Meine Frage ist:</strong></p> <p>Ist es möglich, den gleichen Effekt mit reinem CSS zu erzielen? </p>
P粉033429162P粉033429162452 Tage vor501

Antworte allen(1)Ich werde antworten

  • P粉615886660

    P粉6158866602023-08-16 09:08:45

    由于图标的宽度始终相同(2em),我们可以使用::after伪元素作为右侧空间平衡的“缓冲区”。

    .button__icon设置为弹性布局流。这在“推动”其他元素时至关重要。给它margin-right来平衡按钮的左填充。

    创建一个具有flex-basis: calc(2em + 20px)::after伪元素。其中2em.button__icon的宽度,20px.button__iconmargin-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>

    Antwort
    0
  • StornierenAntwort