问题描述:在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 中文字不换行问题的更多相关文章

  1. 微信小程序 -- scroll view

    效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平 ...

  2. 小程序 <web-view></web-view> 中使用 form 表单提交

    在最近的小程序项目中,使用到了 <web-view></web-view> 内嵌 H5 页面,在 H5 中需要使用 form 表单提交数据. H5 使用的技术框架是 vue+v ...

  3. java的小程序在html中的运行测试

    java的小程序在html中的运行测试,打开vs2012,以网站模式打开,生成,调用iis临时服务器运行.

  4. 微信小程序传递URL中含有特殊字符

    小程序传递URL中含有特殊字符"="时,解决办法:先encodeURIComponent,取到值以后再decodeURIComponent 首先在A页面 var urls = en ...

  5. 微信小程序app.js中设置公有变量

    初始化GlobalData 在App.js的最上方可以设置GlobalData的初始值. App({ globalData:{ appid: '1wqas2342dasaqwe232342xxxxxx ...

  6. 微信小程序在开发中遇到的问题与解决方法

    1.  √ 这种错误多半是该js文件中没有Page这个方法,就算是空的js也必须要把Page({ })写上去 2.  √ 这种错误多半是该json文件没有内容,所以必须要加上{ },就算是空内容也要加 ...

  7. 微信小程序自学过程中遇到的问题 转

    view标签下hover必须为true时,设置hover-class才有效,hover-start-time和hover-stay-time的形式如下:   < view class=" ...

  8. ios下,微信小程序scrollview组件中的fixed元素抖得和帕金森病人一样

    问题现象 这个问题是最近在优化小程序代码时发现的. 在ios环境下,微信小程序的scrollview组件包裹着一个position:fixed的view. 当在scrollview组件上滑动时,这个v ...

  9. 微信小程序实际开发中学习

    三个概念 微信:就是一个聊天工具 微信公众号:企业或个人用于管理其粉丝/用户的应用(类似于APP) 微信小程序:不需要下载安装直接可以使用的软件/应用/APP 小程序与公众号的区别: 定位不同(小程序 ...

随机推荐

  1. 使用gitthub 创建项目搭建博客

    最近在学Andrew Ng 的机器学习,做了上买那个的练习题和变成作业,想着把自己做的编程作业放到GitHub,方便讨论,虽然之前注册了GitHub,但这两年整天在毕设方向的事,做的身心俱疲,再加上自 ...

  2. 「ZJOI2013」K大数查询

    「ZJOI2013」K大数查询 传送门 整体二分,修改的时候用线段树代替树状数组即可. 参考代码: #include <cstdio> #define rg register #defin ...

  3. redis地理位置

    redis 3.2版本中增加的最大功能就是对GEO(地理位置)的支持 当前业务中地图方面是调用高德api(云图),请求多少会有延迟  而redsigeo可以实现查找附近的终端以及测量两点之间的直线距离 ...

  4. php中$_REQUEST、$_POST、$_GET的区别和联系小结

    php中$_REQUEST.$_POST.$_GET的区别和联系小结 作者: 字体:[增加 减小] 类型:转载   php中有$_request与$_post.$_get用于接受表单数据,当时他们有何 ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:原始按钮样式(未被操作)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. centos8 安装mysql 8.0

    本文参照:https://blog.csdn.net/qq_43232506/article/details/102816659 •  安装mysql及依赖 dnf install @mysql • ...

  7. LR、SVM、RF、GBDT、XGBoost和LightGbm比较

    正则化 L1范数 蓝色的是范数的解空间,红色的是损失函数的解空间.L2范数和损失函数的交点处一般在坐标轴上,会使\(\beta=0\),当然并不一定保证交于坐标轴,但是通过实验发现大部分可以得到稀疏解 ...

  8. MQTT v5 (MQTT 5.0) 新特性介绍

    https://blog.csdn.net/mrpre/article/details/87267400 背景 MQTT v3.1.1 作为一个经典的版本,一般能够满足大部分需求:为了避免落后,我们也 ...

  9. vue axios 数据请求实现

    1.安装nginx npm install axios --save-dev cnpm install axios --save-dev 使用淘宝镜像 保存依赖文件到本地 装好了.packjson.j ...

  10. Windows驱动开发-_DRIVER_OBJECT结构体

    每个驱动程序会有唯一的驱动对象与之对应,并且这个驱动对象是在驱动加载的时候,被内核中的对象管理程序所创建的,内核对一个驱动只加载一个实例,是由内核中的I/O管理器负责加载的,驱动程序需要在Driver ...