如何通过cellProps截断v-data-table列内容并修复垂直居中问题

我创建了如下的v-data-table：

<script setup lang="ts">
const headers: any = [
  {
    title: '标题',
    key: 'title',
    cellProps: {
      class: ['my-bold-class']
    }
  }
  // 其他表头配置
]

const items = [...]
</script>

<template>
  <v-data-table
    :headers
    :items
  ></v-data-table>
</template>

我希望标题列内容超过200px时自动截断，于是做了如下设置：

const headers: any = [
  {
    title: '标题',
    key: 'title',
    cellProps: {
      class: ['my-bold-class', 'text-truncate']
    },
    width: '200' // 原本想使用maxWidth，但没生效
  }
  // 其他表头配置
]

根据Vuetify官方文档说明，text-truncate仅对display: block或display: inline-block元素生效，所以我调整为：

cellProps: {
  class: ['my-bold-class', 'text-truncate', 'd-block']
}

调整后效果如下：

可以看到标题列内容不再垂直居中，请问该怎么修复？

另外我注意到表头还支持nowrap属性，用法示例如下：

const headers = [
  {
    // 其他配置项
    nowrap: true
  }
]

但我不清楚该如何正确使用这个属性。

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