微信小程序 css使用技巧總結(jié)
微信小程序 css使用技巧
1:用純CSS創(chuàng)建一個(gè)三角形的原理把上、左、右三條邊隱藏掉(顏色設(shè)為 transparent)
.demo { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent; }
2:設(shè)置最高高度..超過后可以滑動(dòng)
max-height: 550rpx; overflow-y: scroll;
3: text-overflow 當(dāng)屬性規(guī)定當(dāng)文本溢出包含元素時(shí)發(fā)生的事情
clip: 修剪文本 ellipsis : 用省略號(hào)來代表被修剪的文字 string: 使用給定的字符串來代表被修剪的文字 重點(diǎn)是三個(gè)同時(shí)使用:text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
4:overflow: hidden當(dāng)強(qiáng)制不換行的時(shí)候,使用overflow:hidden隱藏超過界面的部分
5: margin-bottom失效
margin-bottom是下方的外邊距,并不能讓元素向下方移動(dòng),margin-top作為上邊距,把元素“推”了下去。 希望圖標(biāo)距離下方30px,那么可以在ul上設(shè)置 position:absolute, bottom:30px ,(這一句我沒有加同樣實(shí)現(xiàn)了效果)另外父元素position:relative
6:強(qiáng)制不換行
white-space:nowrap;
自動(dòng)換行
div{ word-wrap: break-word; word-break: normal; }
強(qiáng)制英文單詞斷行
div{ word-break:break-all; }
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章
JavaScript對(duì)象_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了JavaScript對(duì)象的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06JS實(shí)現(xiàn)圖片產(chǎn)生波紋一樣flash效果的方法
這篇文章主要介紹了JS實(shí)現(xiàn)圖片產(chǎn)生波紋一樣flash效果的方法,通過遞歸調(diào)用自定義函數(shù)f_wave實(shí)現(xiàn)波紋效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02JS操作對(duì)象數(shù)組實(shí)現(xiàn)增刪改查實(shí)例代碼
JS提供了很多方便操作數(shù)組的方法,這篇文章主要給大家介紹了關(guān)于JS操作對(duì)象數(shù)組實(shí)現(xiàn)增刪改查的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-07-07setTimeout函數(shù)兼容各主流瀏覽器運(yùn)行執(zhí)行效果實(shí)例
setTimeout是一個(gè)很不錯(cuò)的函數(shù),網(wǎng)站頁面前端工程師經(jīng)常將其用于幾秒后執(zhí)行的動(dòng)作,下文要講的setTimeout可以很好地兼容IE6,7,8,9以及谷歌等主流瀏覽器2013-06-06JS實(shí)現(xiàn)向iframe中表單傳值的方法
這篇文章主要介紹了JS實(shí)現(xiàn)向iframe中表單傳值的方法,涉及js針對(duì)頁面元素及表單屬性操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-03-03javascript 獲取radio的value的函數(shù) [已測(cè)]
javascript 獲取radio的value的函數(shù) 如果與asp,php等后臺(tái)語言結(jié)合時(shí),一般用不到,但在純js環(huán)境下是必須的。2009-06-06關(guān)于IE瀏覽器以及Firefox下的javascript冒泡事件的響應(yīng)層級(jí)
原來是由于IE瀏覽器以及Firefox對(duì)于冒泡型事件的支持層次不同造成的。(如對(duì)冒泡事件不是很了解可先查詢相關(guān)資料)2010-10-10使用JS模擬錨點(diǎn)跳轉(zhuǎn)的實(shí)例
下面小編就為大家分享一篇使用JS模擬錨點(diǎn)跳轉(zhuǎn)的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02