Element: Tags in multiselect with long optiontexts

[Valumard]

ElementUI version

1.1.6

OS/Browers version

Firefox, Chrome, IE

Vue version

2.1.10

JS Fiddle

http://jsfiddle.net/0bsw8uta/5/

Steps to reproduce

• Create a Multiselect
• Make the Optiontext really long

What is Expected?

When I choose the option, the created tag should be shortened so it will fit in the select-element.

What is actually happening?

The tag is as long as the option-element and displays all the text. So the tag is hovering far over the select element.

[Valumard]

It would be enough, if the tag-text would be wrapped in a span so I can cut it with css.
Actual:

<span class="el-tag el-tag--primary">
        Some long text that represents the optiontext
      <i class="el-tag__close el-icon-close"></i>
</span>

Better:

<span class="el-tag el-tag--primary">
       <span class="el-tag-text"> Some long text that represents the optiontext </span>
      <i class="el-tag__close el-icon-close"></i>
</span>

[Leopoldthecoder]

Fixed in https://github.com/ElemeFE/element/pull/2699/commits/7a94ff726136561f56d549073e586680cfe3f24d

[wilsonIs]

@Leopoldthecoder
能否增加title属性？在鼠标移上去之后能显示完整的内容。
<span class="el-select__tags-text" :title="item.currentLabel">{{ item.currentLabel }}</span>

[kevrousso]

Would it be possible to add a title to the option so that when hovering it, it shows the full text?
Maybe provide a way to include slots so that we can use el-popover? That'd be a more standardized way of doing it actually since we already can do that on some other components.

[Valumard]

Take a look at http://element.eleme.io/#/en-US/component/select#custom-template
You can define your options the way you want :)

[kevrousso]

@Valumard That will just modify the elements in the popper, what I want is a way to see the full text of the options when the select is collapsed with a small width.

[Valumard]

@kevrousso Ah okay, then I have no idea how to do that without some "hacky" javascript.