小程序 scroll-view 中文字不换行问题
问题描述:在scroll-view 中scroll-x="true"时控制文字超出显示省略号,要求如图:

但实际中会出现如文字不换行或样式错乱的问题。
横向滚动的实现如下:

超过两行显示省略号:
.scroll_txt{
word-wrap: break-word;
display:-webkit-box;
overflow:hidden;
text-overflow:ellipsis;
word-wrap:break-word;
-webkit-line-clamp:;
-webkit-box-orient:vertical;
}
因为scroll-view上设置了 white-space:nowrap;导致文字不换行,如图:
这时在.scroll_txt 上添加 white-space:normal !important; 文字换行但是样式错乱。如图:
在父级元素上增加 overflow:hidden; 得以解决。(ios可能出现兼容问题,可加层view并浮动)。
原文:https://blog.csdn.net/ifrwrit/article/details/80054525
小程序 scroll-view 中文字不换行问题的更多相关文章
- 微信小程序 -- scroll view
效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平 ...
- 小程序 <web-view></web-view> 中使用 form 表单提交
在最近的小程序项目中,使用到了 <web-view></web-view> 内嵌 H5 页面,在 H5 中需要使用 form 表单提交数据. H5 使用的技术框架是 vue+v ...
- java的小程序在html中的运行测试
java的小程序在html中的运行测试,打开vs2012,以网站模式打开,生成,调用iis临时服务器运行.
- 微信小程序传递URL中含有特殊字符
小程序传递URL中含有特殊字符"="时,解决办法:先encodeURIComponent,取到值以后再decodeURIComponent 首先在A页面 var urls = en ...
- 微信小程序app.js中设置公有变量
初始化GlobalData 在App.js的最上方可以设置GlobalData的初始值. App({ globalData:{ appid: '1wqas2342dasaqwe232342xxxxxx ...
- 微信小程序在开发中遇到的问题与解决方法
1. √ 这种错误多半是该js文件中没有Page这个方法,就算是空的js也必须要把Page({ })写上去 2. √ 这种错误多半是该json文件没有内容,所以必须要加上{ },就算是空内容也要加 ...
- 微信小程序自学过程中遇到的问题 转
view标签下hover必须为true时,设置hover-class才有效,hover-start-time和hover-stay-time的形式如下: < view class=" ...
- ios下,微信小程序scrollview组件中的fixed元素抖得和帕金森病人一样
问题现象 这个问题是最近在优化小程序代码时发现的. 在ios环境下,微信小程序的scrollview组件包裹着一个position:fixed的view. 当在scrollview组件上滑动时,这个v ...
- 微信小程序实际开发中学习
三个概念 微信:就是一个聊天工具 微信公众号:企业或个人用于管理其粉丝/用户的应用(类似于APP) 微信小程序:不需要下载安装直接可以使用的软件/应用/APP 小程序与公众号的区别: 定位不同(小程序 ...
随机推荐
- 【PAT甲级】1027 Colors in Mars (20 分)
题意: 输入三个范围为0~168的整数,将它们从十三进制转化为十进制然后前缀#输出. AAAAAccepted code: #define HAVE_STRUCT_TIMESPEC #include& ...
- CSP-J2019 加工零件
Background: 之前 $noip $死了,泥萌都说 \(noip SPFA\) 了,现在 \(noip\) 复活了,所以 \(SPFA\) 也复活了. (注:这里的 \(noip\) 跟 \( ...
- Golang 如何交叉编译
Golang 支持交叉编译,即在一个平台上生成另一个平台的可执行程序.方法如下: Mac 下编译 Linux 和 Windows 64位可执行程序 CGO_ENABLED=0 GOOS=linux G ...
- python基本输入输出函数与变量类型
7.python具有三个重要的输出输入函数:print(输出)/eval(转换)/input(输入): 8.对于输出函数print函数的具体使用规则如下:(1)输出字符串:print("字符 ...
- python正则表达式错误集
这篇博文主要记载一些个人的(python)正则表达式的常见错误以及误区,所以,不一定全面,不一定具有权威.但我会把每个例子列出来,争取用事实说话. 大括号中空格问题 In [15]: re.match ...
- 网络编程之TCP三次握手,四次断开
目录 TCP三次握手 1:上图的名词解释 2:TCP三次握手过程 3:为什么不能改成两次握手? TCP三次握手 1:上图的名词解释 SYN:同步序号.它表示建立连接.TCP规定SYN=1时不能携带数据 ...
- 初学微信小程序——配置问题(2)
六.生命周期函数: 在微信公众平台指南中搜索生命周期,找到页面生命周期 比如,我打开cate.js并编写,代码如下: ** * 生命周期函数--监听页面加载 */ onLoad: function ...
- node属性
认识node的方法 1.dom.nodeChildrens 用于获取dom下的子元素节点 2.dom.nodeType 用于获取dom节点的属性.共有12种属性,实用属性3种. 元素节点=>1 ...
- JDBC--调用函数&存错过程
1.通过Connection对象的prepareCall()方法创建CallableStatement对象的实例,在使用prepareCall()方法时需传入一个String类型的字符串,该字符串用于 ...
- 总结了一下 Vue.nextTick() 的原理和用途
对于 Vue.nextTick 方法,自己有些疑惑.在查询了各种资料后,总结了一下其原理和用途,如有错误,请不吝赐教. 概览 官方文档说明: 用法: 在下次 DOM 更新循环结束之后执行延迟回调.在修 ...