工具簡(jiǎn)介：小程序layout設(shè)計(jì)工具，可視化方式進(jìn)行小程序UI設(shè)計(jì)。通過鼠標(biāo)拖拽組件方式進(jìn)行UI布局。工具提供符合微信視覺統(tǒng)一的模板，并且按照FlexBox方式可視化布局。自動(dòng)生成wxml和wxss，復(fù)制到微信開發(fā)者工具中即可同步顯示。視頻介紹請(qǐng)移步優(yōu)酷http://v.youku.com/v_show/id_XMTgyNTQ4NDcyMA==.html

小程序中一般很少大段落的文字，基本是4、5個(gè)字的主題、一行標(biāo)題、一行摘要、兩行描述。顯示時(shí)超出部分用省略號(hào)代替。
下面結(jié)合工具使用介紹一下文字排版的方法。先看效果圖。

工具中屬性設(shè)置如下圖：
兩行文字屬性，限制行數(shù)=2，表示最多兩行，超出部分用省略號(hào)代替。

不限制行數(shù)屬性中限制行數(shù)=0，表示在小程序中根據(jù)文字內(nèi)容自動(dòng)拉伸。

一行文字屬性中限制行數(shù)=1，表示文字只顯示一行，超出部分省略號(hào)代替。

以上文字是顯示在view中的，自動(dòng)生成的wxml如下：

<view class="WViewColumn1" style="">
  <view class="WViewRow1" style="">工欲善其事必先利其器。layout設(shè)計(jì)工具是為小程序開發(fā)而專門定制的。開發(fā)初衷是為了提高UI設(shè)計(jì)效率。在平時(shí)項(xiàng)目開發(fā)時(shí)，由于本人不是專業(yè)美工設(shè)計(jì)，因此在UI設(shè)計(jì)上浪費(fèi)了很多時(shí)間。所以“一怒之下”開發(fā)了這個(gè)工具。</view>
  <view class="WViewRow2" style="">工欲善其事必先利其器。layout設(shè)計(jì)工具是為小程序開發(fā)而專門定制的。開發(fā)初衷是為了提高UI設(shè)計(jì)效率。在平時(shí)項(xiàng)目開發(fā)時(shí)，由于本人不是專業(yè)美工設(shè)計(jì)，因此在UI設(shè)計(jì)上浪費(fèi)了很多時(shí)間。所以“一怒之下”開發(fā)了這個(gè)工具。</view>
  <view class="WViewRow3" style="">工欲善其事必先利其器。layout設(shè)計(jì)工具是為小程序開發(fā)而專門定制的。開發(fā)初衷是為了提高UI設(shè)計(jì)效率。在平時(shí)項(xiàng)目開發(fā)時(shí)，由于本人不是專業(yè)美工設(shè)計(jì)，因此在UI設(shè)計(jì)上浪費(fèi)了很多時(shí)間。所以“一怒之下”開發(fā)了這個(gè)工具。</view>
</view>

自動(dòng)生成的wxss如下：

.WViewColumn1{
box-sizing:border-box;
 display:flex;
 justify-content:flex-start;
 align-items:flex-start;
 flex-direction:column; 
 flex-wrap:nowrap; 
 align-content:stretch; 
 width:100%;
 height: 1960rpx; 
 background-color: transparent; 
 color: #FFFFFF; 
 font-size: 20PX; 
 line-height:40rpx; 

}
.WViewRow1{
box-sizing:border-box;
 display:flex;
 justify-content:flex-start;
 align-items:flex-start;
 flex-direction:row; 
 flex-wrap:wrap; 
 align-content:stretch; 
margin: 16rpx 0rpx 0rpx 0rpx; 
 width:100%;
 height: 4%; 
 display: -webkit-box;
display: -moz-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
 background-color: #FFFFFF; 
 color: #000000;  font-size: 20PX; 
 line-height:40rpx; 

}
.WViewRow2{
box-sizing:border-box;
 display:flex;
 justify-content:flex-start;
 align-items:flex-start;
 flex-direction:row; 
 flex-wrap:wrap; 
 align-content:stretch; 
margin: 16rpx 0rpx 0rpx 0rpx; 
 width:100%;
 height: 12%; 
 background-color: #FFFFFF; 
 color: #000000;  font-size: 20PX; 
 line-height:40rpx; 

}
.WViewRow3{
box-sizing:border-box;
 display:flex;
 justify-content:flex-start;
 align-items:flex-start;
 flex-direction:row; 
 flex-wrap:wrap; 
 align-content:stretch; 
margin: 16rpx 0rpx 0rpx 0rpx; 
 width:100%;
 height: 2%; 
 display: -webkit-box;
display: -moz-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient:vertical;
-webkit-line-clamp:1;
 background-color: #FFFFFF; 
 color: #000000;  font-size: 20PX; 
 line-height:40rpx; 

}

view行高的設(shè)置根據(jù)字體大小而定，比如20px大小的字體，顯示兩行的話Height=40；顯示一行的話Height=20。不需要限制高度的不用寫Height。