美文网首页
微信小程序填坑之路(一):text空格符号以及省略号

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

作者: 码途有道 | 来源:发表于2018-02-24 20:59 被阅读0次

1、text的空格符

  • 首先需要设置<text> 控件的decode值
  • decode可以解析的有&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;
说明
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>
效果图: 多行显示

相关文章

  • 微信小程序开发问题集合

    微信小程序text文本溢出单行/多行省略 微信小程序填坑之路之文本溢出 CSS3文本溢出显示省略号 以上三个链接的...

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

    1、text的空格符 首先需要设置 控件的decode值 decode可以解析的有 < >...

  • 微信小程序的填坑之路

    一 .Mac打开微信开发工具显示的是空白页 网上说的卸载了 再安装 试了好几次都没有解决问题 原来是还有缓存的什么...

  • 微信小程序实践

    今天,实践了微信小程序,边看文档边填坑。 IDE:指的是微信开发者工具。IDE版本:Stable v1.02.20...

  • 微信网页授权、JSSDK授权

    微信授权使用以及填坑之路,请各路大神多多指教如有冲突请以微信接口文档为准本文为个人笔记形式展现,不喜勿喷 微信网页...

  • 微信小程序

    制作微信小程序: A:微信小程序接入流程 注册:微信公众平台注册小程序,同步进行信息完善和开发 小程序信息完善:填...

  • 小程序相关实用文章

    1、微信小程序开发常见之坑2、微信小程序联盟-微信小程序开发社区-小程序3、怎么在弹窗中加入输入框4、微信小程序实...

  • 小程序学习记录

    小程序的省略号 单行文本 多行文本 微信小程序——button添加背景图片

  • 【教程】微信小程序入门

    微信小程序入门基础知识 Moustache:我的微信小程序入门踩坑之旅 github精选:微信小程序入门简要教程 ...

  • 微信小程序填坑之路(二):cover-view

    在一些情况下,我们需要对map、video、canvas、camera这些微信小程序的原生控件,进行自定义,比如在...

网友评论

      本文标题:微信小程序填坑之路(一):text空格符号以及省略号

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