scroll-view横向滑动列表文字换行不生效

最新推荐文章于 2023-09-16 23:18:07 发布
最新推荐文章于 2023-09-16 23:18:07 发布
阅读量316 收藏 2
点赞数 3
文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44479794/article/details/121759053
版权

 正常使用换行css样式时是生效的

 在scroll-view使用换行

 不生效

在文字的父级加上 overflow: hidden;
文字本身加一个white-space: normal !important;

 问题解决

 

 

一个诡异的bug
关注
uniapp [全端兼容] - 详细实现scroll-view滚动视图区域强力隐藏去除滚动条，兼容“安卓/苹果“手机系统真机完美去掉横向和纵向滚动条效果，解决苹果ios真机无法隐藏去掉滚动条问题！
王佳斌
04-01 3731
uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，可滚动视图区域组件，scroll-view，滚动条，去除，隐藏，横向滚动条，纵向滚动条，安卓手机，苹果ios手机，无法去除隐藏滚动条，苹果安卓滚动条隐藏，ios苹果无法隐藏，没效果无效，真机出现滚动条如何隐藏，在安卓机上出现横向滚动条的解决办法，滚动视图隐藏横向滚动条，有滚动条怎么办，就是隐藏不掉，微信小程序去除隐藏去掉scroll-view滚动条，苹果ios系统手机去除，如何去掉滚动条，无法去掉io
微信小程序 - 完美去除 ＜scroll-view＞ 滚动条，保证 100% 去掉隐藏苹果 ios 系统、安卓滚动条（解决 ios 苹果真机scroll-view无法隐藏滚动条）详细示例代码，保证可用
王佳斌
05-28 5893
微信小程序scroll-view滚动条，微信小程序去除隐藏去掉scroll-view滚动条，微信小程序scroll-view苹果ios系统手机去除滚动条，微信小程序scroll-view如何去掉滚动条，微信小程序scroll-view隐藏滚动条，微信小程序scroll-view无法去掉 ios 苹果系统的滚动条，微信小程序隐藏scroll-view滚动条在苹果ios系统不生效，微信小程序scroll-view在苹果ios系统下有滚动条怎么去除隐藏，微信小程序scroll-view去掉ios苹果系统滚动条，微
小程序scroll-view横向滑动列表文字不换行
qq_40250153的博客
12-12 1188
小程序scroll-view横向滑动列表文字不换行 今天在写小程序的时候需要一个横向滑动列表scroll-view,但是发现在scroll-view中一行文字不能换行，代码如下： <scroll-view enable-back-to-top="true" scroll-x="true" class="scroll"> <view wx:for="{{ files}}" wx...
微信小程序scroll-view中文本文字不能换行
weixin_43106312的博客
07-16 1056
今天在写小程序的时候使用了scroll-view,但是发现在scroll-view中一行文字不能换行，代码如下： <scroll-view scroll-y style="width:100rpx;height:100rpx;"> asdhadjhkajshdkjahsdkjasdajsdhkajsdkajsdkajsdhasjdaksj </scroll-view> 发现scroll-view内的一大段英文只显示在一行，超出宽度的部分不能被隐藏了 解决办法： 在网上搜索了
微信小程序 Text在Scroll-View中设置换行失效的问题
weixin_42212220的博客
03-28 528
在开发中遇到了个问题，Text本身设置了换行，有效果，后面在外面加了个Scroll-View后换行的效果就消失了，文字都重叠在了一起，研究了半天后发现，在Text这个子控件里加 white-space: normal;就可以了 white-space: normal; ...
微信小程序Scroll-view内不能正常换行的问题
Ybbb的博客
12-04 2944
今天突然遇到了这个问题，使用了scroll-view之后，scroll-view里面一个view原本设置的超过三行隐藏，突然不能用了。分析了原因之后发现，scroll-view为了能够横向滚动设置了white-space: nowrap; 强制不换行 解决起来最先想到的是，父级div的样式影响了子级，于是就试了在后面加 ! important强调view本来的样式 ，还是不行。后面突然想到，在子级...
解决微信小程序scroll-view换行问题
01-03
今天在写小程序的时候使用了scroll-view,但是发现在scroll-view中一行文字不能换行，代码如下： asdhadjhkajshdkjahsdkjasdajsdhkajsdkajsdkajsdhasjdaksj 发现scroll-view内的一大段英文只显示在一行，超出宽度的部分不能被隐藏了 解决 在网上搜索了一下小程序scroll-view文字不能换行的问题后，发现原来是小程序组件有一个默认的样式 white-space: nowr
小程序scroll-view横向滑动无效果
MENGXIXIXIXI的博客
11-26 431
场景 在用小程序scroll-view进行横向滑动，发现无效果。原来是自己html网页开发知识欠缺。 解决方案 要想小程序scroll-view进行横向滑动，需要满足以下3个条件： 1.scroll-view设置scroll-x属性，表示告诉scroll-view进行横向滑动。例如： <scroll-view class="scroll-horizontal" scroll...
uniapp scroll-view横向滑动
09-04
在uniapp中，可以使用scroll-view组件实现横向滑动效果。需要注意以下几点： 1. 在scroll-view组件上设置scroll-x属性为true，以启用横向滚动效果。 2. 为了确保横向滚动生效，需要给scroll-view组件设置white-...
可重用横向滚动列表
04-04
该源码案例是一款非常不错的可重用横向滚动列表，源码DPHorizontalScrollList，继承ScrollView，重用机制实现可重用横向滚动列表，用法类似tableView。
scroll view 换行解决办法
LYR 的博客
09-02 1885
一定要加上这个 width: 100%; white-space: nowrap; 指定 scroll-view 不换行，这样就能横向滚动了。 <scroll-view class="card-container" scroll-x="true"> <view class="item">aa</view> <view class="item">aa</view> <view class="item"&
【微信小程序】使用scroll-view文字不换行的问题
weixin_43994760的博客
04-14 2406
1. 属性 scroll-view 可滚动视图区域 scroll-y 纵向滚动， 需要给scroll-view一个固定高度 2. 使用 <scroll-view scroll-y="true"> ... ... </scroll-view> 3. 遇到的问题&解决 △ 描述：scroll-view中一行的文字不能换行，比如：一大段的内容为英文时，全部显示在同一行里。直接超出了当前元素的父元素。 △ 原因：小程序组件有一个默认的样式：white-space: n
uniapp中的scroll-view换行问题
qq_36893984的博客
03-02 2470
<view class="navBox"> <scroll-view scroll-x="true" class="scrollBiew" > <view class="currBox" v-for="item in navbox" :key="item.id" @tap="clickNav(item.id)" :class="item.id==n...
小程序scroll-view文字不能自动换行
life0310的博客
06-11 1342
小程序scroll-view文字不能自动换行 今天在做小程序的时候遇到了这个问题，之前应该遇到过但是没有记录导致遗忘，所以还是写一下吧。。 因为给父级scroll-view加了white-space: nowrap;因此导致了这个问题 解决方法：给需要折行的子元素加上white-space: normal; ...
横向滑动的列表
小强的博客
01-01 3875
横向滑动的列表  在安卓开发中，有时候会遇到列表宽度不足以显示所有数据的情况，如果不打算使用两级显示（即列表显示有限的数据，点击后转到新页面显示详细数据）就需要一种能左右滑动来展示更多数据的列表，然而无论是ListView还是ExpandableListView乃至ScrollView都没有这样的能力，因此实现这个功能需要另辟蹊径。简单而又直接的方案  第一种方案的想法非常简单而且直接，安卓提供的各
移动端H5封装一个 ScrollList 横向滚动列表组件
少年的范儿的博客
05-17 857
封装一个横向滚动列表，底部带有自定义的滚动条，同步内容滚动，一般用于首页菜单
uni——横向滚动列表
努力、拼搏、奋进
01-30 1099
uni——横向滚动列表
移动端H5封装一个 ScrollList 横向滚动列表组件，实现向左滑动
最新发布
codel
09-16 1004
移动端H5封装一个 ScrollList 横向滚动列表组件，实现向左滑动
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值