managing text overflow with CSS

I am trying to visualize a sort of TV program guide, a line for each channel. The HTML structure is:

<DIV id="channel2_new" class="channel"> // id different for each channel
  <IMG src="channel2.png开发者_如何学运维">              // logo source different for each channel
  <DIV class=program">
    <P style="width:200">               // actual width value reflects program length
      <SPAN class="time">06:00</SPAN>   // actual time
      <SPAN class="title">TG2</SPAN>    // actual title
    </P>
  </DIV>
</DIV>

The CSS is:

.time{
    visibility:hidden; width:0px; margin:0px; padding:0px; float:left; 
    }

.channel{
    height:30px; white-space:nowrap; margin:0px; width:1000px; overflow:hidden;
    }

.logo{
    border:none; float:left; height:20px; margin-top:5px; 
    }

.program{
    position:absolute; left:80px; 
    }

P{
    float:left; border-style:solid; border-width:thin; height:20px; overflow:hidden; margin-top:0px; 
    }

The idea is to show only the programs that fit within the "channel" width (corresponding to a specified time window, i.e., from 6pm to 10pm). For the programs that start within this window (i.e., at 9pm) but end later (i.e., 11pm), only a partial box should be shown (this is what I hope the "overflow:hidden" attributes should do). See this example web site to understand better what I'm trying to do: http://it.tv.yahoo.com/

In my case, this happens only in an apparently random way: for some channels it works, for other channels the last "program" rectangle is completely missing (no border, no text). If I change the window width, the same channel that was showing correctly might not be working any more, while others might work!

Do you havee any suggestion? Thanks.

What you may be looking for is text-overflow: ellipsis; if you apply it to your p like I've done here: http://jsfiddle.net/P8V4e/6/ you get the ellipsis when the text from .title overflows the p element. Is this the behavior you're looking for?

I also added a min-width: 1em; property to the p, that way it won't collapse completely and not show the ellipsis, but will still retain the width of the other elements. I don't know if that will mess up your formatting.