text-overflow: ellipsis; 通常在以下情况下才生效：
- 元素的宽度必须使用px(pixels），百分比不工作
- 元素必须设置
overflow:hidden;和white-space:nowrap;
问题：
//js
<form>
<fieldset>
<span class='username'>
user first name + middle name + last name + suffix
</span>
</fieldset>
</form>
//css
.username {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
当username过长时，并不会显示省略符。这是因为fieldset带有min-width: min-content;，min-content是自身最小的宽度，这意味着 fieldset的宽度是它子元素的最大宽度，当名字过长，span会自动撑开，text-overflow在这种情况下其实并没有任何意义。
解决方法：
//js
<form>
<fieldset>
<span class='username'>
user first name + middle name + last name + suffix
</span>
</fieldset>
</form>
//css
fieldset {
min-width: 0;
}
.username {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Refrences:
https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
https://developer.mozilla.org/en-US/docs/Web/CSS/width
