小程序UI设计(9)-文字排版
小程序中一般很少大段落的文字,基本是4、5个字的主题、一行标题、一行摘要、两行描述。显示时超出部分用省略号代替。
下面结合工具使用介绍一下文字排版的方法。先看效果图。
工具中属性设置如下图:
两行文字属性,限制行数=2,表示最多两行,超出部分用省略号代替。
不限制行数属性中限制行数=0,表示在小程序中根据文字内容自动拉伸。
一行文字属性中限制行数=1,表示文字只显示一行,超出部分省略号代替。
以上文字是显示在view中的,自动生成的wxml如下:
<view class="WViewColumn1" style=""> <view class="WViewRow1" style="">工欲善其事必先利其器。layout设计工具是为小程序开发而专门定制的。开发初衷是为了提高UI设计效率。在平时项目开发时,由于本人不是专业美工设计,因此在UI设计上浪费了很多时间。所以“一怒之下”开发了这个工具。</view> <view class="WViewRow2" style="">工欲善其事必先利其器。layout设计工具是为小程序开发而专门定制的。开发初衷是为了提高UI设计效率。在平时项目开发时,由于本人不是专业美工设计,因此在UI设计上浪费了很多时间。所以“一怒之下”开发了这个工具。</view> <view class="WViewRow3" style="">工欲善其事必先利其器。layout设计工具是为小程序开发而专门定制的。开发初衷是为了提高UI设计效率。在平时项目开发时,由于本人不是专业美工设计,因此在UI设计上浪费了很多时间。所以“一怒之下”开发了这个工具。</view> </view>
自动生成
.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行高的设置根据字体大小而定,比如20px大小的字体,显示两行的话Height=40;显示一行的话Height=20。不需要限制高度的不用写Height。