When the [Bug Report] select component is multiple-selected, the text is too long and the display box overflows.

[grace618]

Element UI version

2.8.2

OS/Browsers version

chrome/win10

Vue version

2.6.10

Reproduction Link

https://codepen.io/anon/pen/jobgBq?&editable=true

Steps to reproduce

选择select第一项

What is Expected?

显示框可以自适应宽度吗

What is actually happening?

文本溢出

[element-bot]

Translation of this issue:

Element UI version

2.8.2

OS/Browsers version

Chrome/win10

Vue version

2.6.10

Reproduction Link

Https://codepen.io/anon/pen/jobgBq?&editable=true

Steps to reproduce

Select the first item

What is Expected?

Can Display Box Adapt Width

What is actually happening?

Text overflow

[kissu]

Any idea on how to fix that one ? 🙏

Monkey patched it with

.el-tag--info {
	display: flex !important;
	max-width: 100% !important;
}
.el-select__tags-text {
	display: inline-block !important;
	max-width: 90% !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}
.el-tag__close {
	align-self: center !important;
}

[HenryTSZ]

@kissu The collapse-tags have a little problem

[kissu]

@kissu The collapse-tags have a little problem

Pretty sure you can fix that one with some height on the select box. 😁

[perska124]

Any idea on how to fix that one ? 🙏

Monkey patched it with

.el-tag--info {
	display: flex !important;
	max-width: 100% !important;
}
.el-select__tags-text {
	display: inline-block !important;
	max-width: 90% !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}
.el-tag__close {
	align-self: center !important;
}

Despite the height, there should be no dots in +...
Fot me it works fine with max-width: 100% !important instead of 90% here:

.el-select__tags-text {
	display: inline-block !important;
	max-width: 100% !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.