微信小程序> 小程序text文字不分行、空格、换行、行距小结

小程序text文字不分行、空格、换行、行距小结

浏览量:5636 时间: 来源:julystroy
  1. text文字不分行

记个笔记,雅俗共享。
小程序
一开始只是单行,没截图,为了让大家看到不分行的样式,重新回滚的效果。
小程序样式,说实话相对于习惯了xml布局的我,还是有点不适应的;不废话了,先分析下为啥会出现上面的情况:
理论上。布局本身会对手机屏幕宽度做识别,自动换行,小程序中父布局或者自身布局宽度width: 100%;里面的布局里的view就有点傻傻分不清,还是会认为自己的宽度是屏幕的宽度,即使我布局里有个图片占据了一些位置。
解决办法(我是以自己的demo为例,自行斟酌):

.about_acesmart_content{  padding-top:10px;  padding-right: 8rem;   //设置同等右边图片的width  padding-left: 0.5rem;  font-size: 13px;  color: #666666;line-height: 1.4;    display: flex;             //display设置为flex;flex-wrap设置为wrap  flex-wrap: wrap;      }

小注:如果不设置右间距,仅仅只是设置上面的属性依旧不行。最后效果:
小程序

  • text 文字空格、换行
    换行简单,几乎通用的;
    空格t效果可以忽略,其他方法稍微记下(亲测有效):

text中添加这两个属性,切记:space=“ensp” decode="{{true}}"

  • 空格根据字体设置
view    text space="nbsp" decode="{{true}}" 类别   一/text/view
  • 空格是中文字符一半大小
 view    text space="ensp" decode="{{true}}" 类别   二/text/view
  • 空格是中文字符大小
view    text space="emsp" decode="{{true}}" 类别   三/text/view
  1. 行距
    直接在css里设置或者直接在wxml中style=""
.text {  color: #aaa;  font-size: 16px;  margin: 20px;  line-height:1.5em;      //行距}

在此感谢:https://blog.csdn.net/qq_25252769/article/details/76049846
让我了解空格诠释

版权声明

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

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

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