Firefox：带省略号的div - 无法看到内跨

Question

请参阅以下jsfiddle示例 - http://jsfiddle.net/zbst1L21/2/

在Chrome中会显示图标，但在Firefox中，它不是文本长的时候：

如果删除text-overflow: ellipsis，则该图标在Firefox中也可见。

有没有办法解决这个问题，假设我只能改变css？ （html属于无法修改的外部控件）

<div class="rtMid">
    <span class="rtPlus"></span>
    <span class="rtIn">Lorem ipsum dolor sit amet, est possit molestie mnesarchum</span>
</div>
<div class="rtMid">
    <span class="rtPlus"></span>
    <span class="rtIn">Lorem ipsum dolor</span>
</div>

div.rtMid {
    background-repeat: no-repeat;
    overflow: hidden;
    white-space:nowrap;
    text-overflow: ellipsis;
    border: 1px solid red;
    margin-left: 10px;
    padding-left: 25px;    
    width: 150px;
    height: 20px;
}

span.rtIn {
    padding: 4px 3px 3px;
    text-decoration: none;
}

span.rtPlus {
    vertical-align: middle;
    background-repeat: no-repeat;
    display: inline-block;
    height: 20px;
    margin: 5px 6px 0 -20px;
    padding: 0;
    width: 16px;
    background-image: url("https://cdn2.iconfinder.com/data/icons/splashyIcons/add_small.png")
}

Answer 1

试试这个

将以下代码添加到CSS

.rtPlus{position: absolute;}
span.rtIn {text-overflow: ellipsis;line-height: 22px;}
span.rtPlus{margin: 2px 6px 0 -20px;}

在Firefox For OS X上正常运行。

jsFiddle http://jsfiddle.net/2dddbn9e/3/