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

效果图

实现代码

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

微信小程序文字两边添加横线相关推荐

h5的横线_CSS文字两边添加横线的几种方法
这里总结了五种关于文字两边添加横线的方法. 欢迎补充! 最近的项目的设计经常用到文字两边添加横线的方法,这样看上去简洁明了,当然实现的方法也五花八门. 暂且不说哪种方法好,邓爷爷说过不管黑猫白猫抓到老 ...
微信php echo换行,微信小程序文字显示换行问题
微信小程序文字显示换行问题小程序文字显示换行问题用户在上传图文时,输入换行符.导致我在拿到数据后JSON.parse的时候报错. 大概这样的结构: [{ text:'落魄前端在线炒粉!!!' ...
html在字体两边加直线,CSS文字两边添加横线的几种方法
这里总结了五种关于文字两边添加横线的方法. 欢迎补充! 最近的项目的设计经常用到文字两边添加横线的方法,这样看上去简洁明了,当然实现的方法也五花八门. 暂且不说哪种方法好,邓爷爷说过不管黑猫白猫抓到老 ...
微信小程序文字转语音并播放
深知像我这种小白对不懂得绝望,希望可以帮助到别人,本文步骤较为详细在微信小程序中,识别语音转文字或者文字转语音,可以使用官方自带的插件:微信同声传译插件使用方法: 第一步:首先登录微信公众平台,找 ...
js添加关闭功能_微信小程序开发之添加夜间模式功能
使用微信小程序的用户越来越多,因为它使用起来非常方便,而对于开发人员来讲,则需要各种优化布局,使其更利于用户体验. 在微信小程序上,很多小程序都拥有夜间模式,深色模式等功能,今天来讲一下夜间模式的实现 ...
微信小程序怎么长按复制_微信小程序基于Parser添加长按复制、代码高亮等功能...
功能展示引入Parser 微信小程序中引入Parser可直接在项目主页查阅. 代码高亮高亮插件 Prism官网下载prism.js和prism.css,默认只有css代码有渲染样式,注意选择需要渲 ...
微信小程序--地图上添加图片
如何在微信小程序地图添加上,添加图片? 在微信小程序中,地图的层级最高,所以我们没有办法,通过定位,在地图上添加图片等信息; 处理办法: 添加控件:controls; 其中有个属性position,进 ...
微信小程序中如何添加和删除class类名
在微信小程序开发中,不能像普通web开发一样通过JS操作DOM,因此不能通过JSDOM操作直接为一个节点添加一个类.我们可以通过微信小程序数据绑定,再加上微信小程序中支持的三元判断表达式,去更改标签类 ...
微信小程序文字下标_微信小程序循环下标微信小程序怎么做
微信小程序,多层数组,获取下标为Nan如何解决? 应该把Print a(i)放在Next i前面. 即生成一个随机数,就打印.循环执行. 放在后面的话应为执行了next,所以i = 6了,超出了a数组 ...

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

微信小程序文字两边添加横线相关推荐

最新文章

热门文章