微信小程序 css使用技巧
1:用纯CSS创建一个三角形的原理把上、左、右三条边隐藏掉（颜色设为 transparent）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.demo {
width
:
0
;
height
:
0
;
border-width
:
20px
;
border-style
:
solid
;
border-color
:
transparent
transparent
red
transparent
;
}
|
2:设置最高高度..超过后可以滑动
|
1
2
3
|
max-height
:
550
rpx;
overflow-y:
scroll
;
|
3: text-overflow 当属性规定当文本溢出包含元素时发生的事情
|
1
2
3
4
|
clip
: 修剪文本
ellipsis : 用省略号来代表被修剪的文字
string: 使用给定的字符串来代表被修剪的文字
重点是三个同时使用：text-
overflow
:ellipsis;
white-space
:
nowrap
;
overflow
:
hidden
;
|
4:overflow: hidden当强制不换行的时候,使用overflow:hidden隐藏超过界面的部分
5: margin-bottom失效
|
1
2
|
margin-
bottom
是下方的外边距，并不能让元素向下方移动，margin-
top
作为上边距，把元素“推”了下去。
希望图标距离下方
30px
，那么可以在ul上设置
position
:
absolute
,
bottom
:
30px
，(这一句我没有加同样实现了效果)另外父元素
position
:
relative
|
6:强制不换行
|
1
|
white-space
:
nowrap
;
|
自动换行
|
1
2
3
4
5
6
7
|
p{
word-wrap: break-word;
word-break:
normal
;
}
|
强制英文单词断行
|
1
2
3
4
5
|
p{
word-break:break-
all
;
}
|
感谢阅读