您的位置:首页 > 移动开发 > 微信开发

小程序填坑之路(一):text空格符号以及省略号

2017-11-13 18:25 253 查看

1、text的空格符

首先需要设置
<text>
控件的decode值

decode可以解析的有
  < > & '    


说明
ensp中文字符空格一半大小
emsp中文字符空格大小
nbsp根据字体设置的空格大小
例如:
<text decode="emsp">提 交</text>


2、text单行显示,超出部分省略号表示

单行显示,超出部分显示省略号

.single {
/* 超出的文本内容隐藏 */
overflow: hidden;
/* 超出显示省略号 */
text-overflow: ellipsis;
/* 强制不换行 */
white-space: nowrap;
}

<text class="single">活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍</text>


效果图:


多行显示,设置显示指定行数,超出部分显示省略号

.mutli {
/* 对象作为伸缩盒子模型显示 */
display: -webkit-box;
/* 允许任意非CJK(Chinese/Japanese/Korean)文本间的单词断行 */
word-break: break-all;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
/* 可显示的最多行数 */
-webkit-line-clamp: 2;
/* 超出的文本内容隐藏 */
overflow: hidden;
/* 超出显示省略号 */
text-overflow: ellipsis;
}

<text class="mutli">活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍</text>


效果图:
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
相关文章推荐