微信小程序 view的文本自动换行了的问题(scroll-view)/微信小程序 view换行跟不换行的解决方案

在开发微信小程序滚动导航栏时遇到文本自动换行的困扰,尝试使用display:flex和flex-wrap:nowrap无效。通过搜索并探索,发现在wxss中添加word-break:keep-all;属性可以防止文本换行。这一问题的解决过程提醒我们在遇到不常见问题时,应灵活思考,尝试不同解决方案。

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

今天在写一个滚动导航栏的时候发现 view的文本自动换行了,用了display:flex;flex-warp:nowarp;也不管用,
wxml:



{{item}}

wxss:

.top{
width: 100%;
height: 100rpx;
background-color: #F6F5F6;
display: flex;
}

.date{
height: 100rpx;
width: 80rpx;
margin:0rpx 20rpx;
display:flex;
line-height: 100rpx;
}
需求:呈现完整的文字:全部,今天,明天
在这里插入图片描述
再上述wxss文件中添加代码: word-break: keep-all;
在这里插入图片描述最后分享一下解决问题的心理路程:
一般遇到问题先找官方文档看下怎么处理,显然这种问题应该不会被记录在官方文档,于是我上网搜一下解决方案,但是大家的问题基本都是:“微信小程序 view的文本不能自动换行问题”,而我的问题是他自动换行了呀,于是我点开看了一下,
在这里插入图片描述我想的是在word-break这个属性是不是能控制换行问题,于是我在我写下Word-break的时候果然有提示:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值