美文网首页
微信小程序text的空格符号以及单行多行显示问题

微信小程序text的空格符号以及单行多行显示问题

作者: LeftLee | 来源:发表于2023-08-17 16:29 被阅读0次

1、text的空格符

首先需要设置<text> 控件的decode值
decode可以解析的有  < > & '    

值   说明
ensp    中文字符空格一半大小
emsp    中文字符空格大小
nbsp    根据字体设置的空格大小

例如: <text decode="emsp">操 练</text>

-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>
效果预览:

活动介绍活动介绍活动介绍活动介绍
活动介绍活动介绍活动介绍活动...

相关文章

网友评论

      本文标题:微信小程序text的空格符号以及单行多行显示问题

      本文链接:https://www.haomeiwen.com/subject/isekartx.html