微信小程序 css使用技巧

1:用純CSS創(chuàng)建一個三角形的原理把上、左、右三條邊隱藏掉（顏色設(shè)為 transparent）

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

2:設(shè)置最高高度..超過后可以滑動

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

3: text-overflow 當(dāng)屬性規(guī)定當(dāng)文本溢出包含元素時發(fā)生的事情

clip: 修剪文本ellipsis : 用省略號來代表被修剪的文字string: 使用給定的字符串來代表被修剪的文字重點是三個同時使用：text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 

4:overflow: hidden當(dāng)強(qiáng)制不換行的時候,使用overflow:hidden隱藏超過界面的部分

5: margin-bottom失效

margin-bottom是下方的外邊距，并不能讓元素向下方移動，margin-top作為上邊距，把元素“推”了下去。希望圖標(biāo)距離下方30px，那么可以在ul上設(shè)置 position:absolute, bottom:30px ，(這一句我沒有加同樣實現(xiàn)了效果)另外父元素position:relative 

6:強(qiáng)制不換行

white-space:nowrap;

自動換行

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

強(qiáng)制英文單詞斷行

div{word-break:break-all;}

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！