управление переполнением текста с помощью CSS

Question

Я пытаюсь визуализировать своего рода телепрограмму, строку для каждого канала.Структура HTML:

<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>

CSS:

.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; 
    }

Идея состоит в том, чтобы показывать только те программы, которые соответствуют ширине "канала" (соответствует указанному временному окну).с 18:00 до 22:00).Для программ, которые запускаются в этом окне (то есть в 9 вечера), но заканчиваются позже (то есть в 11 вечера), должен отображаться только частичный блок (это то, что я надеюсь, что атрибуты overflow: hidden должны делать).Посмотрите этот пример веб-сайта, чтобы лучше понять, что я пытаюсь сделать: http://it.tv.yahoo.com/

В моем случае это происходит только случайным образом: для некоторых каналов это работает, для других каналов последнее "Программа "Прямоугольник полностью отсутствует (без рамки, без текста).Если я изменю ширину окна, тот же канал, который показывался правильно, может больше не работать, а другие могут работать!

У вас есть какие-либо предложения?Спасибо.

Answer 1

То, что вы можете искать, это text-overflow: ellipsis;, если вы примените его к вашему p, как я сделал здесь: http://jsfiddle.net/P8V4e/6/ вы получите многоточие, когда текст из .title переполнитсяэлемент p.Это поведение, которое вы ищете?

Я также добавил свойство min-width: 1em; к p, чтобы оно не полностью разрушалось и не показывало многоточие, но все равно сохраняло ширинудругих элементов.Я не знаю, если это испортит ваше форматирование.