применить эллипсис, когда текст надписи переполнен

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/