The problem described

As shown in figure:

As shown in the image above, the entire drop-down box wraps automatically after the selection is complete. Personal expectation is to achieve the following results:

Myth: Write styles

The first guess is that the ellipsis is not shown because ANTD does not set the text out of range to show ellipsis, but rather line breaks so that the user can see the selection. So I tried to write the following styles:

.text-ellipsis{
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
Copy the code

It didn’t work…

Guess: The Flex layout of the form affects the style I wrote, so it doesn’t work, and I find a solution online. But it still didn’t work…

Antd has written an ellipsis style, but the text is not long enough, so it does not show ellipsis…

The solution

Finally, through the console, the style of the relevant element is positioned and displayed, and it is found that its main function is as follows:

1. Remove the Flex-flow style

2. Remove overflow styles

3, add width = 0

Can achieve the desired effect.

Change the ANTD style

Having found the specific style, the next step is to write a style that overrides the original ANTD style:

In the React project directory, there is a global stylesheet:

Code as follows: Override the style you want to change:

Ant-row {// display: flex; // display: flex; flex-flow: row nowrap; } // Set Lebel out of scope. Ant-form-item-label {// display: inline-block; // white-space: nowrap; // text-align: right; // vertical-align: middle; overflow: visible; } // set the selected width to 0. Ant-select-item {width: 0}}Copy the code