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

想法是仅显示符合“频道”宽度的节目（对应于指定的时间窗口，即从下午6点到晚上10点）。对于在此窗口内（即晚上9点）开始但稍后结束（即晚上11点）的程序，只应显示一个部分框（这是我希望“溢出：隐藏”属性应该做的）。请参阅此示例网站，以更好地了解我正在尝试执行的操作：http://it.tv.yahoo.com/

在我的情况下，这只是以一种明显随机的方式发生：对于某些通道，它可以工作，对于其他通道，最后一个“程序”矩形完全缺失（没有边框，没有文本）。如果我更改窗口宽度，正确显示的相同频道可能不再有效，而其他频道可能正常工作！

你有任何建议吗？感谢。

Answer 1

如果您将text-overflow: ellipsis;应用于p，就像我在此处所做的那样，您可能正在寻找的是： http://jsfiddle.net/P8V4e/6/ 您获得省略号时来自.title的文字溢出p元素。这是你正在寻找的行为吗？

我还向min-width: 1em;添加了p属性，这样它就不会完全崩溃而不显示省略号，但仍会保留其他元素的宽度。我不知道这是否会弄乱您的格式。

使用CSS管理文本溢出

1 个答案: