How to create localization language-specific css?

edit

The navigation icons (tags, people, badges) combine sprites + text.

When the text gets sufficiently long, the sprite regions overlap, and the last one continues on to show white space. I think this is a bug. It happens with german words, which can get very long.

My fix was to set a fixed width, in skins/default/media/style/style.less:

#navTags{
    .sprites(-50px,-5px);
    width: 50px;
}

#navUsers{
    .sprites(-125px,-5px);
    width: 59px;
}

#navBadges{
    .sprites(-210px,-5px);
    width: 47px;
}

But I don't know much CSS... I guess there must be a better way to clip the visible sprite region, and fall back to the background color outside of it. Ideas?