在使用 <ion-card-title>
标签时,可能会遇到文本溢出时省略号不起作用的问题。这通常是因为 Shadow DOM 的隔离特性导致的。Shadow DOM 是一种将元素及其子元素封装在一个封闭的 DOM 中的技术,这样可以防止外部样式影响到内部元素。
<ion-card-title>
内部的 Shadow DOM 元素不会继承父元素的宽度,导致文本溢出时省略号无法正常显示。可以通过设置 CSS 变量和伪元素来实现文本溢出时的省略号效果。
<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;
}
可以通过 JavaScript 动态计算 <ion-card-title>
的宽度,并应用到内部的 Shadow DOM 元素上。
<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`;
}
});
这种方法适用于需要在 Ionic 框架中使用 <ion-card-title>
标签,并且希望实现文本溢出时显示省略号的场景。
通过上述方法,可以有效解决 <ion-card-title>
中文本溢出时省略号不起作用的问题。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云