[乐意黎原创]微信小程序文本输出 不能显示空格的解决办法及单多行省略号显示

1. 小程序页面文本输出为 <text>{{item.title}}</text>,发现文本里有&nbsp;写在<text>组件里面无法显示空格,直接输出 &nbsp了。

研究小程序文档发现,原来得给<text>设置decode属性才可以正常使用

解决方法: 

写法改为:<text decode="true">{{item.title}}</text>

显示如图:

常用字符转义表

字符 转义字符
" &quot;
& &amp;
< &lt;
> &gt;
[空格] &nbsp;

2、文本单行或多行显示,超出部分显示省略号, 
单行超出显示省略号
<text decode="true" class="single">{{item.title}}</text>


多行超出显示省略号
<text decode="true" class="multiline">{{item.title}}</text>

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

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

 

乐意黎原创
2019-01-30

发布了430 篇原创文章 · 获赞 415 · 访问量 925万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览