标签 隐藏 下的文章

DPlayer移动端播放时自动隐藏暂停按扭

问题：使用DPlayer在移动端观看视频时，播放器中间一直有一个暂停按扭。
解决：监听播放状态，点击播放时加上自动隐藏方法。

dp.container.addEventListener('mousemove', () => {
dp.controller.setAutoHide()
})
dp.container.addEventListener('click', () => {
dp.controller.setAutoHide()
})
//自动播放状态也要隐藏
dp.on('playing', function () {
console.log('playing')
dp.controller.setAutoHide()
})

如何用CSS将超出显示宽度的内容隐藏起来

  • 时间:
  • 分类: CSS
  • 评论

在显示列表的时候，太长的标题默认会换行显示，而这样的显示方式往往会破坏我们原有的页面布局，如何在我们无法知道标题长度的情况下，将超出显示宽度的内容隐藏起来？一个常见的做法是用服务器端语言判断、截取，但是这样在以后需要显示更长的标题时就需要修改服务器端脚本。
这里介绍的是如何用CSS将超出显示宽度的内容隐藏起来，在 IE 下我们还可以添加一个省略号，来表示多余的字符已经截断，以后改版也更方便。

<style type="text/css"> 
.textOverFlow { 
    width:300px; 
    overflow:hidden; 
    text-overflow:ellipsis; 
    white-space:nowrap; 
    border:1px solid #ddd; 
} 
</style>

实现原理：
（1）指定宽度：width:300px;
（2）overflow:hidden; 将超出内容隐藏
（3）text-overflow:ellipsis; IE 专有属性，当对象内文本溢出时显示省略标记(…)
（4）white-space:nowrap; 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。