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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/liyi1009365545/article/details/78523185

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>

    效果图:多行显示

展开阅读全文

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