CODEWITHSUNDEEP
internet-explorercss
user_1357
user_1357

Reputation: 7940

Could someone help me achieve this in CSS?

Basically I want to display two span next to each other. The condition is that first span has max-width 200px so if it exceeds 200px all the overflowed characters are hidden as overflow:hidden is applied to this span. Another condition is that the second span will display all the time next to the first span.

The problem is that since IE does not support (IE7, IE8) max-width feature properly I cannot use this property. Is there any other way to achieve this?

So I have:

<div>
<span>one</span> <--- max width is 200 px
<span>two</span> <--- will alwats display next to span one
</div>

I want to display span 2 always right next to span 1. Adding width to span 1 will leave a huge space between span 1 and span 2 so I cannot do this. I need to expand span 1 dynamically until overflowed. And this need to be cross browser compatible ;(

Thanks.

Upvotes: 0

Views: 111

Answers (2)

Philar
Philar

Reputation: 3897

Please see if this is what you are after. It works alright in IE8, have tested it.

HTML:

<div id="content">
    <span>oneedaskdaslkdjsaldjaslkdjaslkdjldasdasdasdasdalkdnaskdnasjkdnaskjdnaskjndaskjndajksdnasjkdnkjsandkjsandkjasndkjasndjksandkjsandjkndjksandjkasndjkasndkjasndkjsnajsalkdjasd</span>
  <span>two</span>
</div>

CSS:

div span{display:block;max-width:200px;overflow:hidden;float:left;margin:5px;}

Upvotes: 1

Pascal H.
Pascal H.

Reputation: 54

You could try this:

max-width: 200px;
width: expression(document.geElementById('container').style.
width > 200 ? "200px": "auto" );

Upvotes: 0

Related Questions