微信小程序line-height的使用

 时间:2026-05-03 02:34:32

1、打开开发者工具,在项目的pages下,新建mypage文件夹,在此文件夹下新建mypage页面,并把mypage设为第一页面。

微信小程序line-height的使用

2、在mypage.wxml中添加代码如下:

<view>

 <text>

   真的阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿

 </text>

</view>

使用view标签包裹住text标签

微信小程序line-height的使用

3、在mypage.wxss中,写代码如下,目的是要文本内容过长实现换行显示

view{

height:1000rpx;

overflow-wrap: break-word;

}

text{

}

微信小程序line-height的使用

4、保存代码,在左侧模拟器查看效果,此时还没有设置行高

微信小程序line-height的使用

5、修改mypage.wxss,修改代码如下,在view标签中设置line-height

view{

height:1000rpx;

overflow-wrap: break-word;

line-height: 200rpx;

}

text{

}

微信小程序line-height的使用

6、保存代码,在模拟器查看效果

微信小程序line-height的使用

7、修改mypage.wxss代码,将line-height设置到text标签

view{

height:1000rpx;

overflow-wrap: break-word;

}

text{

line-height: 200rpx;

}

微信小程序line-height的使用

8、保存代码,模拟器效果和第6步一样,在外层view和内层text都可以修改行高,都会生效

微信小程序line-height的使用

  • node_modules删除后如何用npm重新安装
  • PowerDesigner15.1安装
  • jquery如何实现鼠标放上div时改变其大小
  • Eclipse导入旧工程的方法
  • visual paradigm中文设置步骤介绍
  • 热门搜索
    宜宾有什么好玩的地方 蝎子养殖技术培训 吃阿胶有什么好处 过户是什么意思 什么是数学模型 喜出望外什么意思 运动会的稿子 college是什么意思 憧憬的近义词是什么 cheer是什么意思