這篇文章介紹了最近很火的微信小程式中css的使用技巧總結，有需要的同學可以參考一下本文
微信小程式css使用技巧
1:用純CSS建立一個三角形的原理把上、左、右三條邊隱藏掉（顏色設為transparent）
.demo {
width:0;
height:0;
border-width:20px;
border-style:solid;
border-color:transparenttransparentredtransparent;
}登入後複製 |
#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; |
自動換行
p{
word-wrap: break-word;
word-break:normal;
}p{
word-break:break-all;
}以上是微信小程式中css的使用技巧總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！
