问题描述:在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. 时间和日期-<Date和SimpleDateFormat>

    第一步.定义一个Date //获取当前时间 Date now=new Date(); 第二步.定义一个SimpleDateFormat //规范时间格式 SimpleDateFormat date=n ...

  2. Android音频录制MediaRecorder之简易的录音软件实现代码(转)

    原文:http://www.jb51.net/article/46182.htm Android音频录制MediaRecorder之简易的录音软件实现代码 这篇文章主要介绍了Android音频录制Me ...

  3. SICP题解

    这里用Common Lisp.Haskell等函数式语言. 1.2.请将下面表达式变换为前缀形式: $$ \frac{5 + 4 + (2 - (3 - (6 + \frac{4}{5})))}{3( ...

  4. [Pytorch数据集下载] 下载MNIST数据缓慢的方案

    步骤一 首先访问下面的网站,手工下载数据集.http://yann.lecun.com/exdb/mnist/ 把四个压缩包下载到任意文件夹,以便之后使用. 步骤二 把自己电脑上已经下载好的数据集的文 ...

  5. 由Nginx反向代理引出的JCaptcha验证码验证失败的问题

    搜索关键字: 1)Windows本地开发正常,部署到Linux远程服务器上JCaptcha验证失败 2)Linux远程服务器上JCpatcha验证失败 3)Nginx反向代理后JCaptcha验证失败 ...

  6. 科软-信息安全实验1-ICMP重定向

    目录 一 前言 二 Talk is cheap, show me the code 三 效果演示 四 遇到的问题&解决 一 前言 文章不讲解理论知识哈,想学习理论知识的,认真听课

  7. 哈希表,Java中的hashCode

    哈希表: 将我们所需的键通过哈希函数转换索引,然后存储在一个数组中. 哈希表是时间和空间之间的平衡,体现空间换时间的算法思想(联想到预加载,缓存等,有时候多存储,预处理缓存一些东西,带来时间复杂度的改 ...

  8. 使用 sp_attach_db 系统存储过程附加数据库时---转载

    //附加数据库 sp_attach_db 当使用 sp_attach_db 系统存储过程附加数据库时. sp_attach_db:将数据库附加到服务器. 语法 sp_attach_db [ @dbna ...

  9. js 字符串 常用处理方式(检索、截取、拼接、批量替换)

    // 检索(字符串中判断是否包含某个字符) 字符串.search('检索的内容');// 返回-1,不包含: 返回非-1,包含 字符串.indexOf("待判断的内容"); // ...

  10. 重要参考SQL

    --保存问卷调查信息IF ISNULL(OBJECT_ID('P_WebSaveSQRecord'),0) > 0 DROP PROCEDURE P_WebSaveSQRecordGO crea ...