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、保存代码，就可以看到行末尾省略号显示的效果了
