[CSS] text-overflow:ellipsis

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