断字:断字在flexbox中不起作用

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  min-width: 0;
  max-width: 100%;
  /* 其他样式 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

const container = document.querySelector('.flex-container');
const item = document.querySelector('.flex-item');

const truncateText = (element) => {
  const containerWidth = container.offsetWidth;
  const itemWidth = item.offsetWidth;

  if (itemWidth > containerWidth) {
    const text = element.textContent;
    const availableWidth = containerWidth - 10; // 留出空间显示省略号
    const textWidth = element.getBoundingClientRect().width;

    let truncatedText = text;

    for (let i = text.length - 1; i >= 0; i--) {
      truncatedText = text.substring(0, i) + '...';
      if (element.getBoundingClientRect().width <= availableWidth) {
        break;
      }
    }

    element.textContent = truncatedText;
  }
};

truncateText(item);