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

【问题标题】：apply ellipsis when label text is overflow标签文本溢出时应用省略号
【发布时间】：2013-08-07 15:53:49
【问题描述】：

在下面的 html 设计中，我想将 text-overflow 应用于媒体播放和备注标签的省略号，并希望第一行上的媒体播放（第一大行）和备注（第二个 bing 行）会去在下一行。 Play and Stop 和 media-played 和 comments 都应该在同一行。你能帮帮我吗？

.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>

【问题讨论】：

这是对label 元素的误导性使用。它旨在用作 control 的标签，例如 input 元素，并且它可能在基于此的用户代理中具有特殊支持。对于仅显示文本，请使用 span 或者，如果它们应该像这里一样显示为块，则使用 div 元素；使用div 使display: block 变得不必要。

标签： css jquery-mobile css-float

【解决方案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/

【讨论】：