微信小程式中css的使用技巧總結

這篇文章介紹了最近很火的微信小程式中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中文網其他相關文章！