Element Plus 中，如何处理表格单元格内容超出范围自动换行的样式写法

在Element Plus这个Vue.js UI库中，表格（`<el-table>`）的单元格默认支持文本自动换行，但如果需要自定义换行样式，可以借助CSS来控制。你可以通过设置`cell-class-name`属性，为特定的单元格应用一个自定义的类名，然后在对应的CSS类中定义换行规则。

例如：

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名" width="180">
      <template slot-scope="scope">
        <span v-bind:class="{ 'word-break: break-all': scope.$index % 3 !== 0 }">{{ scope.row.name }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped>
.word-break-all {
  word-wrap: break-word;
  white-space: normal; /* 或者使用 white-space: pre-line */
}
</style>

<script setup>
const tableData = [
  // ...
];
</script>

在这个例子中，如果每3个单元格外的内容会换行，我们会在`v-bind:class`中添加一个名为`word-break-all`的类，然后在`.word-break-all`的CSS类中设置`word-wrap: break-word`来让文本在需要的地方换行。如果希望保持每个单词在新的一行上，可以用`white-space: pre-line`代替。