微信小程序> 微信小程序中换行,空格(多个空格)、文本省略写法

微信小程序中换行,空格(多个空格)、文本省略写法

浏览量:2231 时间: 来源:非往

在小程序中HTML的网页实体无法正常使用,小程序中的写法为:
一、空格,换行

t 空格( 多个只会显示一个空格)
换行

text你好!t七月流火啊!我在下一行/text

二、连续空格

space 和 decode两种写法

//space[-----------view    text space="ensp"你好 啊      哈哈哈(空格是中文字符一半大小)/text/viewview    text space="emsp"你好 啊      哈哈哈(空格是中文字符大小)/text/viewview    text space="nbsp"你好 啊      哈哈哈(空格根据字体设置)/text/view//decode--------------view    text decode="{{true}}"你好 啊   哈哈哈(空格是中文字符一半大小)/text/viewview    text decode="{{true}}"你好 啊   哈哈哈(空格是中文字符大小)/text/viewview    text decode="{{true}}"你好 啊   哈哈哈(空格根据字体设置)/text/view//只在text当中有用还有综合的使用方法 :text decode="nbsp"地址 : /text//也就是//decode后跟你所要使用的空格类型,上面代码中由于text标签中使用的是 。所以是decode="nbsp"。以此类

 

三、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

 

 

 

 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎