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

胡小牧

于 2019-06-04 17:22:44 发布

阅读量8k

点赞数 4

分类专栏：微信小程序文章标签：微信小程序文字两边添加横线

岁月推动着年华,伴随着流水的脚步走过春夏秋冬.本文重在共享,欢迎大家转载,评论,指教,谢谢！！！！！！

本文链接：https://blog.csdn.net/qq_33210042/article/details/90781673

版权

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

63 篇文章

订阅专栏

本文介绍两种使用WXSS实现文字两边带线效果的方法。第一种利用伪元素简化布局，通过调整border-spacing属性控制线条长度。第二种采用更复杂的Flex布局，分别设置前后空白文本视图作为线条。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

实现代码

方法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;
 }