In this html design below, I want to apply text overflow to an ellipsis for a label with media games and notes, and I want the media game (first big line) on the first line, and the comments (second bing line) on the next line. Play and stop, as well as a media game and comments must fall on the same line. Could you help me?
.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>
source share