微信小程序中text设置line-height不起作用的解决方法

最新推荐文章于 2025-01-29 11:19:37 发布

原创最新推荐文章于 2025-01-29 11:19:37 发布 · 858 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #text #line-height

微信小程序专栏收录该内容

21 篇文章

订阅专栏

在微信小程序开发中，连胜老师课程提及text标签line-height属性失效问题。通过将text标签包裹在view中，并将line-height应用于view，成功解决样式显示异常。

最近在研究微信小程序开发，在学习慕课网上连胜老师的《入门微信小程序开发》课程里，遇到一个问题，给text设置line-height为1的时候不起作用
在这里插入图片描述
页面代码如下

 <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150" />
    </swiper-item>
  </block>
</swiper>
<view class='iems-list'>
  <view class='pro-item' wx:for="{{proList}}">
    <image class='pro-logo' src='{{item.img}}'></image>
    <view class='pro-body'>
      <view class='pro-title'>{{item.title}}</view>
      <text class='pro-desc'>{{item.shortDesc}}</text>
      <view class='pro-footer'>
        <image class='btn-detial' src='/images/btn_detail.png'></image>
        <image class='btn-ask' src='/images/btn_ask.png'></image>

      </view>
    </view>
  </view>
</view>

text样式如下

.pro-desc{
  color: #9a9a0a;
  font-size: 28rpx;
  line-height: 0.8;
}

解决方法
在text标签外套上一层view
如下：

 <view class='pro-desc-container'>
      <text class='pro-desc'>{{item.shortDesc}}</text>
 </view>

line-height作用于view上
样式如下：

.pro-desc-container{
   line-height: 1;
}
.pro-desc{
  color: #9a9a0a;
  font-size: 28rpx;
  line-height: 0.8;
}

最后效果
在这里插入图片描述