Firefox：带省略号的 div - 看不到内部跨度答案

【问题标题】：Firefox: div with ellipsis - cannot see inner spanFirefox：带省略号的 div - 看不到内部跨度
【发布时间】：2015-01-28 13:32:42
【问题描述】：

请参阅以下 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")
}

【问题讨论】：

您需要所有这些边距设置吗？我在jsfiddle.net/9fk79wag 中删除了其中一些，现在该图标在 Firefox 中可见。
恐怕需要它们，因为有些行没有图标，没有它，文本（以及我为了简化而删除的另一个图标）将无法正确对齐。

标签： css firefox ellipsis

【解决方案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/

【讨论】：

似乎position: absolute; 解决了这个问题。