一、文字(font)

文字位置：?可以給文字添加 .mui-text-left、.mui-text-center、.mui-text-right設(shè)置文字位置。

<div class="mui-text-left">我在左邊</div> <div class="mui-text-center">我在中間</div> <div class="mui-text-right">我在右邊</div>

溢出隱藏：當(dāng)文字內(nèi)容超過一行或者多行時(shí)，溢出文本用省略號(hào)代替。

顯示單行：

<p class="mui-ellipsis">我在一行內(nèi)，當(dāng)我超出了會(huì)顯示省略號(hào)。我在一行內(nèi)，當(dāng)我超出了會(huì)顯示省略號(hào)。我在一行內(nèi)，當(dāng)我超出了會(huì)顯示省略號(hào)。我在一行內(nèi)，當(dāng)我超出了會(huì)顯示省略號(hào)。</p>

顯示兩行：

<p class="mui-ellipsis-2">我在兩行內(nèi)，當(dāng)我超出了會(huì)顯示省略號(hào)。我在兩行內(nèi)，當(dāng)我超出了會(huì)顯示省略號(hào)。我在兩行內(nèi)，當(dāng)我超出了會(huì)顯示省略號(hào)。我在兩行內(nèi)，當(dāng)我超出了會(huì)顯示省略號(hào)。我在兩行內(nèi)，當(dāng)我超出了會(huì)顯示省略號(hào)。</p>

若需要設(shè)置顯示多行，通過設(shè)置-webkit-line-clamp屬性，如顯示三行添加style="-webkit-line-clamp:3":

<p class="mui-ellipsis-2" style="-webkit-line-clamp:3">我在三行內(nèi)，當(dāng)我超出了會(huì)顯示省略號(hào)。我在三行內(nèi)，當(dāng)我超出了會(huì)顯示省略號(hào)。我在三行內(nèi)，當(dāng)我超出了會(huì)顯示省略號(hào)。我在三行內(nèi)，當(dāng)我超出了會(huì)顯示省略號(hào)。我在三行內(nèi)，當(dāng)我超出了會(huì)顯示省略號(hào)。我在三行內(nèi)，當(dāng)我超出了會(huì)顯示省略號(hào)。</p>

布局(layout)

1列表去掉默認(rèn)樣式：可以給ul元素設(shè)置.mui-list-unstyled類去掉ul標(biāo)簽在瀏覽器中默認(rèn)的原點(diǎn)和內(nèi)邊距。

<ul class="mui-list-unstyled">//相當(dāng)于style="text-decoration:none;list-style: none;”<li>我是第1條</li><li>我是第2條</li><li>我是第3條</li> </ul>

2列表顯示為內(nèi)聯(lián)元素：可以給ul元素設(shè)置.mui-list-inline類將li標(biāo)簽元素設(shè)置為內(nèi)聯(lián)塊元素。

<ul class="mui-list-inline">//display：inline-block<li>我是第1條</li><li>我是第2條</li><li>我是第3條</li> </ul>

3設(shè)置元素顯示與隱藏：.mui-visibility默認(rèn)為設(shè)置元素可見，.mui-hidden默認(rèn)為設(shè)置元素隱藏。

<div id="loading">loading... </div> //loading3秒，然后消失 <script type="text/javascript">setTimeout(function(){document.getElementById("loading").classList.add('mui-hidden');},3000) </script>

總結(jié)

以上是生活随笔為你收集整理的mui一些小组件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。