CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了css – 标签文本溢出时应用省略号大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
在下面的html设计中,我想将文本溢出应用于省略号用于媒体播放和备注标签,并希望第一行播放媒体(第一个大行)和备注(第二个bing行)将继续下一个线. Play和Stop以及媒体播放和备注都应该属于同一行.你能帮帮我吗?
.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 – 标签文本溢出时应用省略号全部内容,希望文章能够帮你解决css – 标签文本溢出时应用省略号所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。