当标签文本溢出时应用省略号

Question

在下面的html设计中，我想对文本播放和备注标签应用文本溢出省略号，并希望第一行中播放的媒体（第一大行）和备注（第二条线）将在下一条线上。播放和停止以及媒体播放和评论应该全部落在同一行。你能帮我解决吗？

.oneline { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

#player-play, #player-stop 
{ 
    display: inline-block; 
    width: 48px; 
    height: 48px; 
} 
#player-play 
{ 
    background-image: url('../images/play.png'); 
} 
#player-stop 
{ 
    background-image: url('../images/stop.png'); 
} 


<div id="player" data-role="header"> 
     <div data-role="navbar"> 
      <ul> 
       <li class="oneline"> 
        <a href="#" id="player-play" title="Play/Pause" style="float:left" ></a> 
        <a href="#" id="player-stop" title="Stop" style="float:left" ></a> 
        <label id="media-played" class="oneline">first big line first bing line first bing line first big line</label> 
        <label id="remarks">second big line second big line second big line second big line</label> 
       </li> 
      </ul> 
     </div> 
      <div data-role="navbar"> 
       <ul> 
        <li> 
         <input type="range" id="time-slider" data-highlight="true" step=".1" data-mini="true" min="0" max="5.40" value="3.4" disabled> 
        </li> 
       </ul> 
     </div> 
    </div> 

Answer 1

新建CSS：

#media-played,#remarks { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    display:block; 
} 

#player-play, #player-stop 
{ 
    display: inline-block; 
    width: 48px; 
    height: 48px; 
} 
#player-play 
{ 
    background-image: url('../images/play.png'); 
} 
#player-stop 
{ 
    background-image: url('../images/stop.png'); 
} 

的jsfiddle：http://jsfiddle.net/dTffH/