title: apply ellipsis when label text is overflow
body: <p>In this below html design, I want to apply text-overflow to ellipsis for the media-played and remarks label and want the media-played (first big line) on the first line and remarks (second bing line) would go on the next line. The Play and Stop and media-played and remarks should all fall in the same row. Can you please help me out?</p>
  
  <pre><code>.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');
  }
  
  
   &lt;div  id="player" data-role="header"&gt;
          &lt;div data-role="navbar"&gt;
              &lt;ul&gt;
                  &lt;li class="oneline"&gt;
                      &lt;a href="#" id="player-play" title="Play / Pause" style="float:left" &gt;&lt;/a&gt;
                      &lt;a href="#" id="player-stop" title="Stop" style="float:left" &gt;&lt;/a&gt;
                      &lt;label id="media-played" class="oneline"&gt;first big line first bing line first bing line first big line&lt;/label&gt;
                      &lt;label id="remarks"&gt;second big line second big line second big line second big line&lt;/label&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
              &lt;div data-role="navbar"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;
                          &lt;input type="range" id="time-slider" data-highlight="true" step=".1" data-mini="true" min="0" max="5.40" value="3.4" disabled&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>