微信小程序 css使用技巧总结

 更新时间:2017年01月09日 11:44:45   投稿:lqh   我要评论
这篇文章主要介绍了微信小程序 css使用技巧总结的相关资料,需要的朋友可以参考下

微信小程序 css使用技巧

1:用纯CSS创建一个三角形的原理把上、左、右三条边隐藏掉(颜色设为 transparent)

.demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}

2:设置最高高度..超过后可以滑动

 max-height: 550rpx;
 overflow-y: scroll;

3: text-overflow 当属性规定当文本溢出包含元素时发生的事情

clip: 修剪文本
ellipsis : 用省略号来代表被修剪的文字
string: 使用给定的字符串来代表被修剪的文字
重点是三个同时使用:text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 

4:overflow: hidden当强制不换行的时候,使用overflow:hidden隐藏超过界面的部分

5: margin-bottom失效

margin-bottom是下方的外边距,并不能让元素向下方移动,margin-top作为上边距,把元素“推”了下去。
希望图标距离下方30px,那么可以在ul上设置 position:absolute, bottom:30px ,(这一句我没有加同样实现了效果)另外父元素position:relative 

6:强制不换行

white-space:nowrap;

自动换行

div{ 
word-wrap: break-word; 
word-break: normal; 
}

强制英文单词断行

div{
word-break:break-all;
}

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

  • 微信小程序实现留言板功能

    微信小程序实现留言板功能

    这篇文章主要为大家详细介绍了微信小程序实现留言板功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • Javascript 浏览器事件小结

    Javascript 浏览器事件小结

    Javascript中的事件都是与对象相关联的,而不是语言本身所有,当Javascript在浏览器中运行的时候,事件与每个浏览器实现的DOM模型有关。
    2010-02-02
  • 详解微信小程序开发(项目从零开始)

    详解微信小程序开发(项目从零开始)

    这篇文章主要介绍了详解微信小程序开发(项目从零开始),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • JavaScript Event学习第五章 高级事件注册模型

    JavaScript Event学习第五章 高级事件注册模型

    在这一章我会讲解两种高级时间注册模型:W3C和微软的。因为这两个方法都不能跨浏览器,所以在现在看来他们的使用场合并不多。
    2010-02-02
  • bootstrap PrintThis打印插件使用详解

    bootstrap PrintThis打印插件使用详解

    这篇文章主要为大家详细介绍了bootstrap PrintThis打印插件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • js操作css属性实现div层展开关闭效果的方法

    js操作css属性实现div层展开关闭效果的方法

    这篇文章主要介绍了js操作css属性实现div层展开关闭效果的方法,涉及javaScript操作css样式实现div弹出层的效果,非常具有实用价值,需要的朋友可以参考下
    2015-05-05
  • canvas绘制环形进度条

    canvas绘制环形进度条

    本文主要介绍了canvas绘制环形进度条的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 可能被忽略的一些JavaScript数组方法细节

    可能被忽略的一些JavaScript数组方法细节

    这篇文章主要给大家介绍了一些可能被忽略的JavaScript数组方法细节,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-02-02
  • 详解Bootstrap各式各样的按钮(推荐)

    详解Bootstrap各式各样的按钮(推荐)

    Bootstrap为我们提供了各式各样漂亮的按钮,我们无需自己给按钮写样式,直接使用它给我们提供的类样式,使用在我们的按钮上,非常的简单方便
    2016-12-12
  • JS实现可展开折叠层的鼠标拖曳效果

    JS实现可展开折叠层的鼠标拖曳效果

    这篇文章主要介绍了JS实现可展开折叠层的鼠标拖曳效果,具有展开折叠层及实时显示鼠标坐标位置的功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10

最新评论