mui修改样式之mui-ellipsis-2

时间:2026-02-15 23:57:43

1、新建一个APP项目,然后,打开index.html页面,填写如下的代码:

<header class="mui-bar mui-bar-nav">

  <h1 class="mui-title">hbuilder app开发之mui-ellipsis效果</h1>

</header>

<div class="mui-content">

<ul class="mui-table-view">

<li class="mui-table-view-cell"><span class="mui-ellipsis-2">纯文字多行效果,超过两行,将用省略号表示;纯文字多行效果,超过两行,将用省略号表示;纯文字多行效果,超过两行,将用省略号表示;纯文字多行效果,超过两行,将用省略号表示</span></li>

</li>

</ul>

</div>

接着,点击菜单“运行”-“Chrome”选项,查看效果。

mui修改样式之mui-ellipsis-2

2、按F12,让Chrome浏览器进入调试状态,接着,选中mui-ellipsis-2样式代码,便可以在右边查看mui-ellipsis-2样式的信息。

mui修改样式之mui-ellipsis-2

3、把2修改成3,然后,回车,便可查看页面的变化(由原来的二行,变成了三行,才显示省略号)

mui修改样式之mui-ellipsis-2

mui修改样式之mui-ellipsis-2

mui修改样式之mui-ellipsis-2

© 2026 海能知识库
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com