<ion-card-title>中的文本溢出省略号不起作用--> Shadow-Dom-Element不采用父宽度

<ion-card>
  <ion-card-title class="ellipsis-title">这是一个非常长的标题，可能会导致文本溢出</ion-card-title>
</ion-card>

.ellipsis-title {
  --overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: var(--overflow);
  width: 100%; /* 确保宽度足够 */
}

.ellipsis-title::after {
  content: '...';
  position: absolute;
  right: 0;
  background: white; /* 背景颜色与父元素一致 */
  padding-left: 4px;
}

<ion-card>
  <ion-card-title id="ellipsis-title">这是一个非常长的标题，可能会导致文本溢出</ion-card-title>
</ion-card>

document.addEventListener('DOMContentLoaded', () => {
  const titleElement = document.getElementById('ellipsis-title');
  const shadowRoot = titleElement.shadowRoot.querySelector('.sc-ion-card-title-h');
  if (shadowRoot) {
    shadowRoot.style.width = `${titleElement.offsetWidth}px`;
  }
});