添加了文本溢出：省略号以跨越html元素

Question

我有一个带有一些文本的span元素，我需要将text-overflow：省略号类添加到。我遇到的问题是文本中可能包含一些html元素..例如

<button width="75px">
    <span width="25px"> something </span>
    <span>"text string 1" <sup>asdf</sup> "text string 2"</span>
</button>

这是我在这个范围内的css：

    display:inline-block;
    width: 50px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

如果跨度结束在<sup>标记之前，它将显示为＆＃34;文本stri ...＆＃34;正如所料。我的问题是，如果结尾位于</sup>标记之后，它将不会添加省略号并显示为＆＃34;文本字符串1 ^asdf text str＆＃34; （切断没有椭圆的字符串）

非常感谢任何帮助。

由于