微信小程序样式overflow和text-overflow

微信小程序样式overflow和text-overflow

微信小程序样式overflow和text-overflow

打开开发者工具，在项目pages下新建mypage文件夹，并在文件夹内新建

page，名为mypage，在app.json配置文件中将mypage设为第一页面。

在mypage文件夹下放一张图片，并在mypage.wxml中写代码如下：

在mypage.wxss中写代码如下：

.imgouter{

width: 200rpx;

height: 200rpx;

border-radius: 50%;

}

保存代码，左侧模拟器发现，图片还是最大宽度显示了，这是view默认尺寸显示，并不是在样式里定义的

修改mypage.wxss代码如下，设置overflow隐藏多出来的图片内容，代码如下：

.imgouter{

width: 200rpx;

height: 200rpx;

border-radius: 50%;

overflow: hidden;

}

保存代码，在左侧模拟器看到显示的尺寸为样式文件定义的了

修改mypage.wxml代码，添加一个文本，当文本内容超过一行就显示省略号，代码如下：

我是内容可能有点长哈哈哈哈或或或或或或或或或或或或或或

hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

添加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;

保存代码，就可以看到行末尾省略号显示的效果了