CODEWITHSUNDEEP
cssfirefoxfont-awesome
Mariana Franco
Mariana Franco

Reputation: 297

Font-awesome icon is overlapping truncated text on Firefox

I'm trying to create a link in my page that is formed by a text followed by a font-awesome icon. This link can not bypass a given width, so I created I css class to truncate the text if necessary. Also the icon need to be aligned to the right (I'm using float:right).

This is the fiddle with the example of what I'm trying to do:

Fiddle

and here is the code:

<div class="divclass truncate">
    <a href="www.google.com" title="blablablablabla">
        <i class="fa fa-fw fa-lg fa-lock" style="float:right;" title="Read only"></i>
        blablablablablablablablabla
    </a>
</div>

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.divclass {
    width: 100px;
}

This works fine on Chrome, but on Firefox the icon is overlapping the text.

Anyone knows how to fix this?

Upvotes: 3

Views: 1270

Answers (1)

C3roe
C3roe

Reputation: 96306

I’d probably approach this in a slightly different way:

  • apply width and text-overflow to the link itself
  • position the icon absolutely
  • give the link some extra padding to the right to make space for the icon

http://jsfiddle.net/czf552vp/7/

Upvotes: 3

Related Questions