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

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 文字空格、换行
  换行简单，几乎通用的\n;
  空格\t效果可以忽略，其他方法稍微记下（亲测有效）：

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

• 空格根据字体设置

<view>
    <text space="nbsp" decode="{{true}}">&nbsp;类别&nbsp;&nbsp;&nbsp;一</text>
</view>

• 空格是中文字符一半大小

 <view>
    <text space="ensp" decode="{{true}}">&ensp;类别&ensp;&ensp;&ensp;二</text>
</view>

• 空格是中文字符大小

<view>
    <text space="emsp" decode="{{true}}">&emsp;类别&emsp;&emsp;&emsp;三</text>
</view>

3. 行距
   直接在css里设置或者直接在wxml中style=""

.text {
  color: #aaa;
  font-size: 16px;
  margin: 20px;
  line-height:1.5em;      //行距
}

---

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