微信小程序填坑之路（一）：text空格符号以及省略号

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/liyi1009365545/article/details/78523185

1、text的空格符

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

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

例如： <text decode="emsp">提&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>

  效果图：