升级DevExtreme至23.2版本后自动生成伪类元素的永久解决需求

DevExtreme 23.2版本为dx-tab-panel组件新增了dx-tab-text-span-pseudo元素，用于优化文本裁剪逻辑，但这会引发样式冲突。以下是从配置层面彻底消除该元素的方案：

方案一：全局禁用（所有组件生效） #

在项目全局配置中统一关闭伪元素生成，以Angular项目为例，在app.module.ts中配置：

import { DxModule } from 'devextreme-angular';

@NgModule({
  imports: [
    DxModule.forRoot({
      tabPanel: {
        textRenderMode: 'original' // 强制使用原始文本渲染，不生成伪元素
      }
    })
  ]
})
export class AppModule { }

方案二：单个组件实例禁用 #

仅针对特定的dx-tab-panel关闭伪元素，直接在组件标签上添加配置：

<dx-tab-panel #tabPanel style="margin-top: 10px;" [textRenderMode]="'original'">
  <dxi-item title="{{'header' | translate}}">
    <!-- 组件内容 -->
  </dxi-item>
</dx-tab-panel>

关键说明 #

• textRenderMode是23.2版本新增的配置项，取值original会让组件不再生成辅助伪元素，完全使用原始文本节点渲染标题。
• 禁用伪元素后，若需要文本溢出裁剪效果，需自行通过CSS实现：

  .dx-tab-text-span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  

内容的提问来源于stack exchange，提问作者Dhairya