一、文字(font)

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

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

溢出隱藏：當文字內容超過一行或者多行時，溢出文本用省略號代替。

顯示單行：

<p class="mui-ellipsis">我在一行內，當我超出了會顯示省略號。我在一行內，當我超出了會顯示省略號。我在一行內，當我超出了會顯示省略號。我在一行內，當我超出了會顯示省略號。</p>

顯示兩行：

<p class="mui-ellipsis-2">我在兩行內，當我超出了會顯示省略號。我在兩行內，當我超出了會顯示省略號。我在兩行內，當我超出了會顯示省略號。我在兩行內，當我超出了會顯示省略號。我在兩行內，當我超出了會顯示省略號。</p>

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

<p class="mui-ellipsis-2" style="-webkit-line-clamp:3">我在三行內，當我超出了會顯示省略號。我在三行內，當我超出了會顯示省略號。我在三行內，當我超出了會顯示省略號。我在三行內，當我超出了會顯示省略號。我在三行內，當我超出了會顯示省略號。我在三行內，當我超出了會顯示省略號。</p>

布局(layout)

1列表去掉默認樣式：可以給ul元素設置.mui-list-unstyled類去掉ul標簽在瀏覽器中默認的原點和內邊距。

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

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

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

3設置元素顯示與隱藏：.mui-visibility默認為設置元素可見，.mui-hidden默認為設置元素隱藏。

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。