How to correctly cut text that does not fit into the width?

Problem was found when changing font sizes in the area that cuts the text

[Temmokan]

Greetings,

The task: create an area that simply cuts the text that doesn't fit its width instead of placing the text on a new line (default ebhaviour).

The following approach works well:

 vertical-align: top;
 height: 1.3em;
 overflow: hidden;
 display: block;

("display" attribute used, since the container might be a non-block element such as "span")

but when I change the font size in the browser, the area using settings similar to above either displays the part of 'extra text' below or the text is cut by height (I see only upper part of it).

If I am not mistaken, "overflow: hidden" works only if a vertical limit is specified (height). Can someone suggest the correct CSS to do the trick - that would work if font size is changed (in browser's View menu).

Compatibility with IE 5.5+, Firefox 2+, Opera 9+ is a must.

Thank you.

With all respect,

Konstantin

[alias]

try modifying the line-height attribute accordingly. set it to 1.3em or so. and the font-size should be in em's as well.

hope that helps.

[SuzyUK]

what you have seems OK. As alias has said I too think this is to do with line height but I also wonder if there are any default margins on the text/elements inside the fixed size div? (I know you said span but it should be the same if display: block is used)

I found a difference between IE and FF when I used <p> elements inside the fixed height div/area. That was because the default margins of the <p> collapsed in IE, but that's easily enough fixed by specifying your own margins on elements and then like alias says, you can adjust the height/line-height of the box so that it incorporates the text line-height and any required margins..

for e.g.

div{
height: 2.1em;
line-height: 1.3;
overflow: hidden;
display: block; 
border: 1px solid #f00;
width: 300px;
}
div p {margin: 0.5em 0;}

[alias]

and, additionally, I'd like to note that SuzyUK added the 1px solid red border around the problematic div - borders are an exceptionally good way to visualize and often solve problems ;)

[Xapti]

Perhaps I don't fully understand what you are asking for. Isn't white-space:nowrap what you want?

Even if a height is specified on a container, text can still overflow vertically, since it pushes text horizontally first, and whatever else keeps going down. That's why it seems best to use nowrap, so that it all stays on one line.

When you say the text gets cut off, or can see two lines if you resize the text size (depending on whether it was increased of decreased), I don't see how that could be, because your container height is assigned with ems, and even has display:block so it will work on spans. An increase in text size should increase both the container and the text equally (except I know I had an issue doing it once with the input element... for some reason I had to use line-height for IE6 even though input is a replaced element).

[Temmokan]

Thanks to everybody having responded, now using your pieces of advice.

[Temmokan]

The CSS class containing attributes like

 vertical-align: top;
 height: 1.3em;
 line-height: 1.3em;
 font-size: 1.3em;
 white-space: nowrap;
 overflow: hidden;
 display: block;

worked fine, thanks again to everyone.