问题叙述

如图：

如上图，完成选择后整个下拉框会自动换行。个人期望是达到如下效果：

误区：编写样式

首先猜想没有显示省略号的原因是antd并没有设置文本超出范围让其显示省略，而是设置换行，目的是让用户可以看见选择内容。于是我尝试编写以下样式：

.text-ellipsis{
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
复制代码

并未起作用。。。。。

猜想：form的flex布局影响了我编写的样式，导致不生效，然后网上找到解决方式。但是依旧没有生效。。。。

搞来搞去最后发现antd写了省略样式，只不过文本还不够长，所有没有显示省略号。。。。

解决方式

最后通过控制台，定位显示相关元素的样式，发现其主要作用的样式如下：

1、去掉flex-flow样式

2、去掉overflow样式

3、添加width为0

便可以达到想要的效果。

更改antd样式

找到了具体的样式，接下来就是编写样式，覆盖掉原来的antd样式：

在react工程目录里边，存在全局样式表：

进行如下编码：覆盖掉想要更改的样式即可：

// 修改antd form表单自动换行
form {

  // 设置整体元素不换行
  .ant-row {
    // display: flex;
    flex-flow: row nowrap;
  }

  // 设置lebel 超出范围可见
  .ant-form-item-label {
    // display: inline-block;
    // white-space: nowrap;
    // text-align: right;
    // vertical-align: middle;
    overflow: visible;
  }

  // 设置选中后的宽度为0
  .ant-select-selection-item {
    width: 0
  }
}
复制代码