CODEWITHSUNDEEP
cssfirefoxellipsis
Amit
Amit

Reputation: 1184

Firefox: div with ellipsis - cannot see inner span

See the following jsfiddle example - http://jsfiddle.net/zbst1L21/2/

In Chrome the icon is displayed, but in Firefox it isn't when the text it long:

enter image description here

If the text-overflow: ellipsis is removed, the icon is visible in Firefox as well.

Is there a way to fix this, assuming I can change only the css? (the html belongs to an external control which cannot be modified)

<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")
}

Upvotes: 0

Views: 140

Answers (1)

Alien
Alien

Reputation: 3678

try this

add following code to your CSS

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

is working fine On Firefox For OS X.

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

Upvotes: 1

Related Questions