⼩程序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;
jquery滚动条滚动到底部word-break: normal;
}
强制英⽂单词断⾏
div{
word-break:break-all;
}
感谢阅读,希望能帮助到⼤家,谢谢⼤家对本站的⽀持!

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。