问题描述:在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. c语言中“#if 0 / #if 1 ... #endif”的作用

    原帖地址:http://www.ourdev.cn/bbs/bbs_content.jsp?bbs_sn=2028608&bbs_page_no=1005&bbs_id=9999 1. ...

  2. IP show

    1. 查看本机公网IP 1.1 curl ifconfig.me 1.2 ipinfo.io 1.3 test-ipv6.com 1.4 more 2. 查看本机IP,host 2.1 hostnam ...

  3. Python 基础之模块之math random time

    一:math 数学模块import math#(1)ceil() 向上取整操作 (对比内置round)res = math.ceil(6.001)  #注意精度损耗print(res)#(2)floo ...

  4. C语言中的结构体是怎么定义的_怎么使用?

    结构体的定义 // 定义结构体st struct st{ int a; // 成员a int b; // 成员b }; #include <stdio.h> struct st{ int ...

  5. 「JLOI2015」战争调度

    题目 [内存限制:256 MiB][时间限制:1000 ms] [标准输入输出][题目类型:传统][评测方式:文本比较] 题目描述 脸哥最近来到了一个神奇的王国,王国里的公民每个公民有两个下属或者没有 ...

  6. java比较器Comparator

    1. 实现比较类 public class Comparator implements java.util.Comparator<TaskInfo>{ @Override public i ...

  7. 关于req.params、req.query、req.body等请求对象

    请求对象,通常传递到回调方法,这意味着你可以随意命名,通常命名为 req 或 request . 请求对象中最常用的属性和方法有: req.params 一个数组,包含命名过的路由参数. req.pa ...

  8. vmware workstation导入ovf文件报错:未通过OVF规范一致性或虚拟硬件合规性检查

    转自:https://blog.csdn.net/zs15yy/article/details/73793585 报错如下: 原因:这是因为OVF 版本不同导致的,VMware Workstation ...

  9. 【Python数组及其基础操作】【numpy ndarray】

    一.创建数组 在python中创建数组最简单的办法就是使用array函数.它接受一切序列型的对象,然后产生一个含有传入数据的numpy数组.其中,嵌套序列(比如由一组等长列表组成的列表)会被转换为一个 ...

  10. Shiro登录身份认证(从SecurityUtils.getSubject().login(token))到Realm的doGetAuthenticationInfo

    ssm框架下,controller接收到登录请求交给Service并开始处理流程: 1.Service的login方法: @Service public class SysUserServiceImp ...