问题描述:在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. 列表推导式、生成器表达式以及zip()max()max()/min()sum()sort()map()filter()的用法

    列表推导式: 基本格式: variable = [out_exp_res for out_exp in input_list if out_exp == 2] #out_exp_res: 列表生成元素 ...

  2. GsonUtils.getGson().fromJson() 转泛型集合用法

    //计算其他收费 List<QiTaFree> qiTaFreeList = GsonUtils.getGson().fromJson(exhiMain.getQiTaFressJson( ...

  3. SpringBoot之基础入门-专题一

    SpringBoot之基础入门-专题一 一.Spring介绍 1.1.SpringBoot简介 在初次学习Spring整合各个第三方框架构建项目的时候,往往会有一大堆的XML文件的配置,众多的dtd或 ...

  4. apply()、call()、bind()

    在JavaScript中,call.apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向.apply和call方法.bind方法都是在特定的作用域中 ...

  5. 58按之字形顺序打印二叉树 +队列访问使用front和back,栈才是top

    题目描述 请实现一个函数按照之字形打印二叉树,即第一行按照从左到右的顺序打印,第二层按照从右至左的顺序打印,第三行按照从左到右的顺序打印,其他行以此类推.   思路:最暴力的方法就是使用队列进行层次遍 ...

  6. Python字符乱码

    content = b'{"log_id": 5507183146687669657, "words_result_num": 2, "words_r ...

  7. 二 sql语句,常用字段数据类型

    MySQL中常用DDL命令   database definition language  与 DML命令 :  database definition language 操作数据库: 创建数据库 : ...

  8. android7.0关于TelephonyManager.getDeviceId()返回null的问题

    在android7.0的系统下发现TelephonyManager.getDeviceId()在权限允许的情况下取得返回值也为null,解决方法如下: public static String get ...

  9. Day9 - J - 吉哥系列故事——恨7不成妻 HDU - 4507

    单身! 依然单身! 吉哥依然单身! DS级码农吉哥依然单身! 所以,他生平最恨情人节,不管是214还是77,他都讨厌! 吉哥观察了214和77这两个数,发现: 2+1+4=7 7+7=7*2 77=7 ...

  10. Codeforces Round #199 (Div. 2) D. Xenia and Dominoes

    把 'O' 看成 'X',然后枚举它的四个方向看看是否能放,然后枚举 $2^4$ 种可能表示每种方向是否放了,放了的话就标成 'X',就相当于容斥,对于新的图去dp. dp就是铺地砖,行用二进制来表示 ...