css - 标签文本溢出时应用省略号

标签 css jquery-mobile css-float

在下面的 html 设计中,我想将文本溢出应用于媒体播放和备注标签的省略号,并希望媒体播放(第一大行)在第一行和备注(第二行)上在下一行。 Play and Stop 和 media-played and remarks 应该都在同一行。你能帮帮我吗?

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

最佳答案

新的 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/

关于css - 标签文本溢出时应用省略号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18083612/

相关文章:

css - 内联表单域 : search box and button in jQuery-Mobile

html - CSS Toggle 不 float 在右侧

css - twitter-bootstrap .thumbnail/.pull-left 和 blockquote 重叠

asp.net - 无法更改仅在 css asp.net 中具有图像 html 的 div 的背景颜色

javascript - 如何重新开始循环javascript循环

html - 当不在另一个元素内时定位一个元素(即所有不在段落内的 anchor )

css - jQuery Mobile - 保持布局网格垂直对齐

javascript - 按名称获取复选框的值

css - 如何删除两个 CSS float 之间的空间?

html - 将 float div设置为高度: 100%?