微信小程序样式overflow和text-overflow
1、打开开发者工具，在项目pages下新建mypage文件夹，并在文件夹内新建
page，名为mypage，在app.json配置文件中将mypage设为第一页面。
2、在mypage文件夹下放一张图片，并在mypage.wxml中写代码如下：
<view class="imgouter">
<image src="Penguins.jpg"></image>
</view>
在mypage.wxss中写代码如下：
.imgouter{
width: 200rpx;
height: 200rpx;
border-radius: 50%;
}
3、保存代码，左侧模拟器发现，图片还是最大宽度显示了，这是view默认尺寸显示，并不是在样式里定义的
4、修改mypage.wxss代码如下，设置overflow隐藏多出来的图片内容，代码如下：
.imgouter{
width: 200rpx;
height: 200rpx;
border-radius: 50%;
overflow: hidden;
}
5、保存代码，在左侧模拟器看到显示的尺寸为样式文件定义的了
6、修改mypage.wxml代码，添加一个文本，当文本内容超过一行就显示省略号，代码如下：
<!--pages/mypage/mypage.wxml-->
<view class="imgouter">
<image src="Penguins.jpg"></image>
</view>
<view class="textouter">
<text>我是内容可能有点长哈哈哈哈或或或或或或或或或或或或或或
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh </text>
</view>
7、添加mypage.wxss代码如下：
/* pages/mypage/mypage.wxss */
.imgouter{
width: 200rpx;
height: 200rpx;
border-radius: 50%;
overflow: hidden;
}
.textouter{
width: 100%;
height: 40rpx;
line-height: 40rpx;
font-size: 32rpx;
overflow: hidden;
white-space:nowrap;
text-overflow: ellipsis;
}
注意下面三行代码必须有
overflow: hidden;
white-space:nowrap;
text-overflow: ellipsis;
8、保存代码，就可以看到行末尾省略号显示的效果了
