微信小程序文字两边添加横线

微信小程序 专栏收录该内容
63 篇文章 2 订阅

效果图

 

实现代码

 方法1 简单点的

 wxml 

<view >
     <text class='reason_txt'>入网的理由</text>
</view>

wxss


 
 
.reason_txt{
  font-size: 32rpx;
  color: #333333;
  display: table;
  width: auto;
  white-space: nowrap;
  border-spacing: 0.5rem 0;
  margin-left: 28rpx;
  margin-right: 28rpx;
}

.reason_txt::before,.reason_txt::after{
  display: table-cell;
  content: "";
  width: 50%;
  background: linear-gradient(#D8D8D8, #D8D8D8) repeat-x center;
  background-size: 0.1rem 0.1rem;
}



若果想修改线的长度修改border-spacing: 0.5rem 0; 的值即可 

 

方法二:麻烦点的

wxml代码如下

<view class='main_view'>
      <text class='befor'></text>
     <text class='reason_txt'>入网的理由</text>
      <text class='after'></text>
</view>

wxss 代码如下

 .main_view{
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   width: 100%;
   height: 60rpx;
   margin-top: 100rpx;
   
 }

 .befor{
   width: 200rpx;
   height: 1rpx;
   background: #333333;
   line-height: 60rpx;
 }
 .after{
   width: 200rpx;
   height: 1rpx;
   background: #333333;
   line-height: 60rpx;
 }

 .reason_txt{
   position: relative;
   margin-top: -28rpx;
 }



 

  • 3
    点赞
  • 0
    评论
  • 6
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值