小程序 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 小程序与公众号的区别: 定位不同(小程序 ...
随机推荐
- 解题报告:luogu P5543 [USACO19FEB]The Great Revegetation S
题目链接:P5543 [USACO19FEB]The Great Revegetation S 好坑啊,都身败名裂了. 思路一: 考虑染色法,跑一遍搜所就好了,不给代码了. 思路二: 考虑并查集,我想 ...
- redis介绍及搭建
redis介绍 Redis最适合所有数据in-momory的场景,虽然Redis也提供持久化功能,但实际更多的是一个disk-backed(以写入磁盘的方式进行同步,实现持久化)的功能,跟传统意义上的 ...
- Numpy中 arange() 的用法
1. 概述Numpy 中 arange() 主要是用于生成数组,具体用法如下: 2. arange()2.1 语法numpy.arange(start, stop, step, dtype = Non ...
- Python中turtle绘图学习笔记和实例
一.既然本次讲的主角是turtle函数库,那肯定得先了解一下它是什么 turtle库是Python语言中一个很流行的绘制图像的函数库,想象一个小乌龟,在一个横轴为x.纵轴为y的坐标系原点,(0,0)位 ...
- Prometheus组件
Prometheus组件 上一小节,通过部署Node Exporter我们成功的获取到了当前主机的资源使用情况.接下来我们将从Prometheus的架构角度详细介绍Prometheus生态中的各个组件 ...
- ROS学习笔记10-写一个简单的订阅者和发布者(C++版本)
本文档来源于:http://wiki.ros.org/ROS/Tutorials/WritingPublisherSubscriber%28c%2B%2B%29 写发布者节点如前所述,节点是连接到RO ...
- LoRaWAN协议(一)------架构解析
摘自:http://www.cnblogs.com/answerinthewind/p/6200497.html LoRaWAN协议(一)-----架构解析 (1)LoRaWAN分层 LoRaWAN总 ...
- ch4 圆角框
固定宽度的圆角框 只需要两个图像:一个应用于框的顶部,一个应用于底部 <div class="box"> <h2>Lorem Ipsum</h2> ...
- ng -----监听变化($scope.$watch())
需求:项目组件中遇到改变日期触发方法. 困难:日期组件中不涉及释焦功能 解决:在angularjs中用$scope.$watch() 其中name是字符串,是指监听到的具体对象值.
- 常用keycode列表
KEYCODE列表 电话键 KEYCODE_CALL 拨号键 5 KEYCODE_ENDCALL 挂机键 6 KEYCODE_HOME 按键Home 3 KEYCODE_MENU 菜单键 82 K ...