<p>Saya sedang membangunkan komponen butang dengan ikon dan teks. </p> <p>Ikon diletakkan di sebelah kiri butang dan teks dijajarkan di tengah-tengah butang. </p> <p>Jika teks tidak boleh dimuatkan ke dalam butang, ia tidak sepatutnya membalut tetapi boleh dipotong. </p> <p>Syarat utama untuk memotong teks ialah teks hendaklah jarak yang sama dari tepi butang dengan ikon dari tepi butang. </p> <p>Jadi anda tidak boleh menambah padding sebaris yang sama dalam butang. </p> <p>Jika teks tidak dipotong, ia akan dijajarkan di tengah-tengah butang. </p> <p>Walau bagaimanapun, sebaik sahaja ia mula bertindih dengan ikon atau gagal dimuatkan ke dalam butang, teks akan dipotong. </p> <p>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. </p> <p>Contoh visual butang</p> <p>Saya cuba menggunakan CSS untuk mencapai kesan ini, tetapi gagal. </p> <p>Akhir sekali, saya menambah ResizeObserver pada setiap butang yang mengira sama ada terdapat ruang yang mencukupi untuk teks. </p> <p>Jika ruang tidak mencukupi, gaya berbeza akan digunakan pada ikon. </p> <p>Penyelesaian ResizeObserver saya, cuba ubah saiz tetingkap</p> <p>CodePen</p> <pre class="brush:php;toolbar:false;">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); });</pre> <p><strong>Soalan saya ialah:</strong></p> <p>Adakah mungkin untuk mencapai kesan yang sama menggunakan CSS tulen? </p>

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