亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

<p>I am developing a button component with an icon and text. </p> <p>The icon is placed on the left side of the button, and the text is aligned in the middle of the button. </p> <p>If the text cannot fit into the button, it should not wrap but can be truncated. </p> <p>The key condition for truncating text is that the text should be the same distance from the edge of the button as the icon is from the edge of the button. </p> <p>So you cannot add equal inline padding in buttons. </p> <p>If the text is not truncated, it will be aligned in the middle of the button. </p> <p>However, once it starts overlapping the icon or failing to fit into the button, the text will be cut off. </p> <p>In other words, in the normal state, the position of the icon remains unchanged, but when there is not enough space for the text, the icon will push the text to the truncated position. </p> <p>Visual example of button</p> <p>I tried using CSS to achieve this effect, but failed. </p> <p>Finally, I added a ResizeObserver to each button that calculates whether there is enough space for the text. </p> <p>If there is not enough space, a different style will be applied to the icon. </p> <p>My ResizeObserver solution, try resizing the window</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 = (entries) => { entries.forEach((entry) => { const { target } = entry; const text = target.querySelector(`.${CLASS_TEXT}`); const { width: widthButton } = entry.contentRect; if (!(text instanceof HTMLElement)) { return; } 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>My question is:</strong></p> <p>Is it possible to achieve the same effect using pure CSS? </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" />

<div class="grid">
  <button class="button">
    <i class="fa-solid fa-heart fa-2xl button__icon"></i>
   
    <span class="button__text">
      長文本，應(yīng)該被截斷
    </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>