當標籤文本溢出時應用省略號

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/