问题描述:在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. gets和scanf区别

    scanf 和 gets 读取字符串 深入了解scanf()/getchar()和gets()等函数 scanf与gets函数读取字符串的区别 今天看到一段话,大致是说gets比scanf()快,有点 ...

  2. java-jpa-criteriaBuilder使用

    一个复杂的查询例子(包含常用的所有查询方法) CriteriaBuilder criteriaBuilder = entityManager.getCriteriaBuilder(); //查询结果所 ...

  3. 如何优雅的写好python代码?

    Python与其他语言(比如 java或者 C ++ )相比有较大的区别,其中最大的特点就是非常简洁,如果按照其他语言的思路老师写Python代码,则会使得代码繁琐复杂,并且容易出现bug,在Pyth ...

  4. VS2010如何在同一个解决方案下建立多个项目以及切换运行不同项目

    前言: 在编一些小程序时,往往我们不需要一个问题就建立一个解决方案,我们完全可以让多个项目放在同一个解决方案下,切换启动项运行即可.接下来介绍具体的步骤 一.建立空白解决方案以及添加新项目 1.先建立 ...

  5. C# Show()与ShowDialog()的区别-----转载

    A.WinForm中窗体显示  显示窗体可以有以下2种方法:  Form.ShowDialog方法 (窗体显示为模式窗体)  Form.Show方法 (窗体显示为无模式窗体) 两者具体区别如下:  1 ...

  6. 布局文件中fill_parent和match_parent有什么区别?

    1)fill_parent设置一个构件的布局为fill_parent将强制性地使构件扩展,以填充布局单元内尽可能多的空间.这跟Windows控件的dockstyle属性大体一致.设置一个顶部布局或控件 ...

  7. Ajax--数据格式

    1.从服务端接收数据的时候,那些数据必须以浏览器能够理解的格式来发送,服务器端的编程语言智能以如下三种格式返回数据:1)XML; 2)JSON; 3)HTML; 2.解析HTML: --HTML由一些 ...

  8. 解决modelsim破解在win10下无法生成license

    显示没有找到mgls.dll,此时,这个教程能够帮助你. 1.右击搜索结果cmd,选择以管理员身份运行 2. 打开win64(进入安装目录的win64),也就是两个破解文件所在的路径,输入cd win ...

  9. Python学习笔记之基础篇(-)python介绍与安装

    Python学习笔记之基础篇(-)初识python Python的理念:崇尚优美.清晰.简单,是一个优秀并广泛使用的语言. python的历史: 1989年,为了打发圣诞节假期,作者Guido开始写P ...

  10. MySQL 通过SQL语句导出表为文件

    SELECT * //你要导出的字段 FROM `tabel` //表名 INTO OUTFILE "D:\\file.txt" //导出的文件路径和文件名 LINES TERMI ...