uniapp微信小程序横线带文字
时间: 2025-02-06 20:32:56 浏览: 63
### 实现带文字的横线样式
为了在 UniApp 微信小程序中实现带文字的横线效果,可以采用 CSS 和 HTML 结合的方式来创建这种视觉效果。具体来说,可以通过设置 `::before` 和 `::after` 伪类来绘制线条,并放置中间的文字。
#### 使用伪元素构建分隔符
```html
<template>
<view class="separator-container">
<text class="separator-text">或</text>
</view>
</template>
<style scoped>
.separator-container {
display: flex;
align-items: center;
text-align: center;
}
.separator-container::before,
.separator-container::after {
content: '';
flex: 1;
height: 1px; /* 设置线条高度 */
background-color: #ccc; /* 线条颜色 */
margin: 0 8px; /* 调整两侧间距 */
}
.separator-text {
color: #999; /* 文字颜色 */
font-size: 14px; /* 字体大小 */
padding: 0 10px; /* 增加一些内边距使文字更突出 */
}
</style>
```
上述代码片段定义了一个容器 `.separator-container` 来包裹实际显示的文字节点 `<text>` 。利用该容器的伪元素 `::before` 及 `::after` ,可以在文本两端分别渲染一条水平直线[^3]。
此方法不仅适用于简单的分割线场景,在更多复杂的设计需求下也能灵活调整样式属性以满足不同场合的要求。
阅读全文
相关推荐



















