Menu
I've got some text that is displayed on a single line in a container that has a fixed width. If the text can't be contained within the width of the container the overflow is hidden. Any combination of three status icons may appear positioned from the right hand side of the container. If any of these icons appear I'd like the text overflow to be hidden before the first icon appears so the text does not appear obscured behind the icons.
How can I overflow the text so it doesn't flow under the icons (ideally using only CSS and not needing to resort to JavaScript)?
An example of the CSS and HTML I've started from (neither of which are set in concrete) follows. Here's a live example of the code which also illustrates the desired result (note it has an background image inlined in the CSS using the data URI scheme so won't work in versions of Internet Explorer earlier than 8).
CSS:
.line {
position: relative;
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.star, .circle, .flag {
position: absolute;
top: 3px;
height: 23px;
width: 15px;
background-image: url(icons.png);
}
.star {
right: 30px;
}
.circle {
right: 15px;
background-position: -17px 0;
}
.flag {
right: 0;
background-position: -32px 0;
}
HTML:
<div class="line">This is some text that should have overflow that is hidden.</div>
<div class="line">
This is some text that should have overflow that is hidden.
<div class="flag"></div>
</div>
<div class="line">
This is some text that should have overflow that is hidden.
<div class="circle"></div><div class="flag"></div>
</div>
<div class="line">
This is some text that should have overflow that is hidden.
<div class="star"></div><div class="circle"></div><div class="flag"></div>
</div>
<div class="line">
This is some text that should have overflow that is hidden.
<div class="star"></div><div class="flag"></div>
</div>
<div class="line">
This is some text that should have overflow that is hidden.
<div class="circle"></div>
</div>
816
You could make use the background image directly in the div that contains the text and use padding to free some space for the icons.
EDIT:
Here is a working example, but I couldn't get "nowrap" to work, so I cheated by using a height:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css" media="screen">
.star {
background-image: url('data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00.%00%00%00%10%08%06%00%00%00i%C9M%EA%00%00%00tIDATH%C7%ED%96Q%0A%C0%20%0CC%7B%98%C9%EE%7F%C2y%01%91%2C%BE%0C%19%16%FCl%F3%AC5Z%F5%C7%B8%AF%F6%1CpQOYr%11%02%80%00%96X%5CpG%D4%06~%B3%E3Y%A1%95%8E!%A3%91%10ws%A3G%9D%D88v%BB)GP%C0Q%5B%A2%EC%2Cf%C1%AB%A2%04%B8%05%3FJ%A4%BA%1E%7B%F8%14%ABK%8E%9A%DDu%C59%EA%A38%FF%A4%DD%A2%03%C8d%24%84%B6%AC%BF%C0%00%00%00%00IEND%AEB%60%82');
background-position: right;
background-repeat: no-repeat;
padding-right: 30px;
}
.line {
width: 200px;
overflow: hidden;
height: 20px;
}
</style>
</head>
<body>
<div class="star line">This is some text that that should have overflow that is hidden.</div>
<div class="star line" style="padding-right: 0px;">This is some text that that should have overflow that is hidden.</div>
</body>
</html>
And it seems like you have to use single images instead of sprites, but you could add the padding directly to the star, circle and flag class.
89
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
