实现文本内容超出文本框时出现省略号的效果。

<span style="display: inline-block;overflow: hidden;230px;text-overflow: ellipsis;vertical-align: bottom">
{{$select.selected.name}}
</span>

text-overflow:clip | ellipsis

默认值:clip

适用于:所有元素

clip: 当对象内文本溢出时不显示省略标记(...),而是将溢出的部分裁切掉。 
ellipsis: 当对象内文本溢出时显示省略标记(...)。

inline-block的元素特点:

  将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。(准确地说,应用此特性的元素呈现为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属性)

原文地址:https://www.cnblogs.com/boshen-hzb/p/6112405.html