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

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;
}

@kissu The collapse-tags have a little problem

@kissu The collapse-tags have a little problem

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

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;
}

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.