Butang dengan teks dan ikon berpusat

Question

Saya sedang membangunkan komponen butang dengan ikon dan teks.

Ikon diletakkan di sebelah kiri butang dan teks dijajarkan di tengah-tengah butang.

Jika teks tidak boleh dimuatkan ke dalam butang, ia tidak sepatutnya membalut tetapi boleh dipotong.

Syarat utama untuk memotong teks ialah teks hendaklah jarak yang sama dari tepi butang dengan ikon dari tepi butang.

Jadi anda tidak boleh menambah padding sebaris yang sama dalam butang.

Jika teks tidak dipotong, ia akan dijajarkan di tengah-tengah butang.

Walau bagaimanapun, sebaik sahaja ia mula bertindih dengan ikon atau gagal dimuatkan ke dalam butang, teks akan dipotong.

Dalam erti kata lain, dalam keadaan biasa, kedudukan ikon kekal tidak berubah, tetapi apabila ruang tidak mencukupi untuk teks, ikon akan menolak teks ke kedudukan terpotong.

Contoh visual butang

Saya cuba menggunakan CSS untuk mencapai kesan ini, tetapi gagal.

Akhir sekali, saya menambah ResizeObserver pada setiap butang yang mengira sama ada terdapat ruang yang mencukupi untuk teks.

Jika ruang tidak mencukupi, gaya berbeza akan digunakan pada ikon.

Penyelesaian ResizeObserver saya, cuba ubah saiz tetingkap

CodePen

const CLASS_TEXT = `button__text`;
const CLASS_NO_FREE_SPACE = `butang_tiada-ruang-kosong`;
const FREE_SPACE_SIZE = 70;

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

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

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

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

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

Soalan saya ialah:

Adakah mungkin untuk mencapai kesan yang sama menggunakan CSS tulen?

Answer 1

Memandangkan lebar ikon sentiasa sama (2em），我们可以使用::after unsur pseudo bertindak sebagai "penampan" untuk mengimbangi ruang di sebelah kanan.

Letak .button__icon设置为弹性布局流。这在“推动”其他元素时至关重要。给它margin-right untuk mengimbangi padding kiri butang.

Buat ruang yang mempunyai flex-basis: calc(2em + 20px)的::after伪元素。其中2em是.button__icon的宽度，20px是.button__icon的margin-right。这样可以在.button__textseimbang kiri dan kanan apabila lebih pendek.

akan justify-content: space-between应用于父元素，以帮助平衡.button__icon、.button__text和::after当.button__text menjadi lebih pendek.

Tambah flex-shrink: 999，一个巨大的收缩因子，以便布局引擎在.button__text较长时优先收缩::after elemen.

*,
*::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>