React+antd在一个Modal里面使用树状结构的Table时，实现第一列的文本内容过长时换行后对齐显示

本文介绍: 检索看到它的结构是这样的，文本把td的整个内容占完了，第一行由于span 和 button占着位置，所有没有从最开始显示，这是不合适的，我们可以为这个文本加一个div标签。在table渲染行的第一个属性中加一个render，为这一行的文本加一个div，使用flex和overflowWrap实现我们想要的效果。React+antd在一个Modal里面使用树状结构的Table时，第一列的文本内容过长换行不对齐怎么修复。上图可以看到文本换行之后是没有对齐的。这样我们想要的效果就实现了。

React+antd在一个Modal里面使用树状结构的Table时，第一列的文本内容过长换行不对齐怎么修复

上图可以看到文本换行之后是没有对齐的

检索看到它的结构是这样的，文本把td的整个内容占完了，第一行由于span 和 button占着位置，所有没有从最开始显示，这是不合适的，我们可以为这个文本加一个div标签

在这里插入图片描述

在table渲染行的第一个属性中加一个render，为这一行的文本加一个div，使用flex和overflowWrap实现我们想要的效果

  const columns = [
    {
      title: ' PRJ名称',
      key: 'projectName',
      dataIndex: 'projectName',
      render: (text) => <div style={{display:"flex",flexDirection:"row",alignItems:"flex-start",overflowWrap: "anywhere"}}> {text} </div>,
    },
    ...

这样我们想要的效果就实现了