小程序 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 小程序与公众号的区别: 定位不同(小程序 ...
随机推荐
- Ubuntu 解决TXT文本乱码问题
只要依次在终端输入这两行指令即可: gsettings set org.gnome.gedit.preferences.encodings auto-detected "['GB18030' ...
- Django 学习之中间件Middleware
一.中间件介绍 中间件顾名思义,是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出.因为改变的是全局,所以需要谨慎实用,用不好会影响 ...
- [Linux] day07——查看及过滤文本
查看及过滤文本 =====================================cat concatenate -n 添加行号------------------- ...
- [Linux] day05——命令行
--------------------linux命令 实现某一功能指令或程序 命令行执行依赖于解释器linux命令的分类 内部命令 属于shell解释器一部分 /bin/bash 外部命令 独立与s ...
- 数字对象NSNumber的使用
先简述下关于NSNumber的信息 NSNumber的存在就相当于java中的装箱与拆箱.只不过java中的装箱拆箱过程,使用的是对应的类型,比如基本数据类型是int.double类型,装箱时就得对应 ...
- PHP pclzip.php 解压中文乱码
修改 pclzip中方法privExtractFile 代码 if ($p_path != '') { $p_entry['filename'] = $p_path."/".$p_ ...
- android7.0关于TelephonyManager.getDeviceId()返回null的问题
在android7.0的系统下发现TelephonyManager.getDeviceId()在权限允许的情况下取得返回值也为null,解决方法如下: public static String get ...
- Java中的协变与逆变
Java作为面向对象的典型语言,相比于C++而言,对类的继承和派生有着更简洁的设计(比如单根继承). 在继承派生的过程中,是符合Liskov替换原则(LSP)的.LSP总结起来,就一句话: 所有引用基 ...
- JS动态获取 Url 参数
此操作主要用于动态 ajax 请求 1.首先封装一个函数 GetRequest(),能动态获取到 url 问号"?"后的所有参数 , function GetRequest() { ...
- Linux centosVMware MySQL主从介绍、准备工作、配置主、配置从、测试主从同步
一.MySQL主从介绍 MySQL主从又叫做Replication.AB复制.简单讲就是A和B两台机器做主从后,在A上写数据,另外一台B也会跟着写数据,两者数据实时同步的 MySQL主从是基于binl ...