精华内容
下载资源
问答
  • 微信小程序文字超过显示省略号
    千次阅读
    2019-01-30 21:19:22

    在小程序开发过程中,经常会遇到一些数据无法在text中完全展示,所以会使用到隐藏相关文字,并在后方加上省略号(...)。那么怎么展示呢?

    方法一:

    只需要在对应的text中设置下面的css就可以了。

    overflow:hidden;//超出一行文字自动隐藏 

    text-overflow:ellipsis;//文字隐藏后添加省略号

    white-space:nowrap;//强制不换行

    上面的css只能保证单行显示隐藏,那么你想要2,3,n行隐藏呢?这个要求其实也是可以通过css做到的。下面贴出css:

    display: -webkit-box;

    overflow: hidden;

    text-overflow: ellipsis;

    word-wrap: break-word;

    white-space: normal !important;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    只要改变其中-webkit-line-clamp的数字,就可以实现对应的需求了。

    方法二:服务端或者前端js使用截取的方法,但是不建议使用,1,不方便适配屏幕宽度,2,影响体验(性能可能影响访问速度)

    更多相关内容
  • 微信小程序开发之IOS和Android兼容的问题 、时间转换问题: 这不只是小程序上面的问题是ios系统 都有这个问题 就是new Date(“2017-06-16”) 在IOS会出现NAN的情况所以对于时间转换需要另行封装,解决方案如下 1...
  • 最近开发微信小程序,遇到到过种坑,例如什么前端发送请求,后端请求成功,没有获取到前端传递的值;后端请求成功,并且值,前端就是出不来数据;请求接口出现Provision headers are shown的现象;到最后苹果手机上...
  • 微信小程序ios和安卓键盘 textarea每次输入超过一行或者换行时textarea位置会往上偏移 第一次尝试使用 cursor-spacing解决 微信小程序使用 textarea ,ios 和 安卓 手机 ,键盘会挡住输入框。使用了 cursor-spacing ...

    微信小程序ios和安卓键盘 textarea每次输入超过一行或者换行时textarea位置会往上偏移

    第一次尝试使用 cursor-spacing解决

    微信小程序使用 textarea ,ios 和 安卓 手机 ,键盘会挡住输入框。使用了 cursor-spacing 属性, 指定光标与键盘的距离。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离 。 在ios上,键盘不遮挡输入框。**但是在安卓手机上, cursor-spacing 指定之后,每次输入超过一行或者换行时textarea位置会往上偏移,与键盘之间产生了距离**。
    

    最后的解决办法

     1、首先使用adjust-position属性 ,设置为 adjust-position="{{false}}"  ,不让弹起键盘导致整个页面推上。
     2、使用 bindfocus 以及  bindblur  。
     		bindfocus 	输入框聚焦时触发,event.detail = { value, height },height 为键盘高度。获取键盘高度。 
    
      bindfocus(e) {
        const { height } = e.detail;
        this.setData({
          height: height
        })
      },
      bindblur(){
        this.setData({
          height: 0
        })
      },
    
    3、当键盘聚焦时,获取键盘的高度,给盒子设置 bottom 值,距离底部多少高度。当失去焦点时,bottom设为0 。即可完美解决问题。
    
       <view class="padding-xl cu-content" style="bottom:{{height}}px">
            <textarea  placeholder="请填写..." value="{{content}}" bindinput="bindinput" cursor-spacing="140" adjust-position="{{false}}"  bindfocus="bindfocus" bindblur="bindblur"></textarea>
       </view>
    
    展开全文
  • 小程序富文本多行文本溢出省略号ios真机无效问题 之前写小程序遇到富文本多行文本溢出省略号iso无效问题,因为返回的是富文本所以用v-html渲染在页面上,在模拟器上一点问题没有,唯独到了ios真机测试是没效果的,...

    【微信小程序】小程序富文本多行文本溢出省略号ios真机无效问题

    之前写小程序遇到富文本多行文本溢出省略号iso无效问题,因为返回的是富文本所以用v-html渲染在页面上,在模拟器上一点问题没有,唯独到了ios真机测试是没效果的,安卓倒是没问题

    页面渲染方式

    <div class="rice-text">
    	<div  v-html="coupon.USE_DESC" > </div>
    </div>
    

    css样式

    .rice-text{
    	width: 100%;
    	height: 90rpx;
    	line-height: 30rpx;
    	font-size: 24rpx;
    	overflow: hidden;
    	text-overflow: ellipsis;
    	display: -webkit-box;
    	-webkit-line-clamp: 3;
    	-webkit-box-orient: vertical;
    	word-break: break-all;
    }
    

    这样写模拟器上一点问题没有,省略号也能正常显示,但是到了真机上根本不显示省略号

    解决办法

    办法就是在拿到接口返回的富文本以后,在富文本外层使用模板字符串再套一层div盒子,并且在div盒子上写上行内样式
    <div style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;word-break: break-all;">${这里是接口返回的富文本}</div> 然后再用真机测试看看吧

    展开全文
  • 微信小程序没有提供列表控件,所以也没有iOS上惯用的列表项左滑删除的功能,SO只能自己干了。 原理很简单,用2个层,上面的层显示正常的内容,下面的层显示一个删除按钮,就是记录手指滑动的距离,动态的来移动...
  • 只要设置auto-height 只是显示一行文本,唯有去掉auto-height 才不会出现文本出现了隐藏~

    值
    只要设置auto-height 只是显示一行文本,唯有去掉auto-height 才不会出现文本出现了隐藏~

    展开全文
  • 部件扩展包含个大的部件以显示所有的状态,/中型部件将提供特定的详细信息。 用于显示主要状态面板的样板应用程序个共享的框架,其中包含应用程序部件扩展之间共享的所有代码。 屏幕...
  • 发现带有 的这一行注释后版本可正常运行,度娘到小程序李不能这么写,于是修改写法,测试后正常, 12点39 提审 43发布,问题解决 检查正则表达式里面是否有 正则匹配 ,如果有,请尝试其他写法
  • 微信小程序和uni的Toast,弹出纯文本提示消息的时候有个兼容问题,只展示两。 在ios上的最大宽度比安卓小,当文字过多的时候会展示不全。 原因 微信小程序对Toast进行了字数限制,最多两,有图标的时候甚至...
  • 但是有个问题:安卓在超过两的时候会正常显示提示文字,微信开发者工具显示也是正常的,但是真机调试iPhone手机不会完全显示超出的文字,这个问题目前已经存在许久了,微信之前的限制也是只有15个文字以内。...
  • 1.scroll-view 中的需要滑动的元素不可以用 float 浮动使其一行展示; 2.包裹scroll-view的元素如果用 display:flex; 是没有滚动效果的; 3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的...
  • 两种情况:1、只需要显示一行,超过的省略号处理text{ overflow:hidden;//超出一行文字自动隐藏 text-overflow:ellipsis;//文字隐藏后添加省略号 white-space:nowrap;//强制不换行 }2、如果在多行的情况下 height: ...
  • 我们有时会遇到一些情况需要去隐藏部分文字以达到省略的效果,比如个消息的Toast,只起到提醒的作用,详细文章需要点击进出查看,这时候Toast只需要显示一部分正文即可。 示例: 正文:“在此之前,这条规定禁止...
  • 格式调整Ctrl+S:保存文件Ctrl+[,Ctrl+]:代码行缩进Ctrl+Shift+[,Ctrl+Shift+]:折叠打开代码块Ctrl+CCtrl+V:复制粘贴,如果没有选中任何文字则复制粘贴一行Shift+Alt+F:代码格式化Alt+Up,Alt+Down:上下移动...
  • 最近遇到个需求,后台转过来的带格式的富文本需要默认显示5+。。。,然后点击查看更多后显示全部,我的html结构如下 第个为正确代码,第二个为错误代码 <view class="orgintro"> <rich-text :...
  • 最近应公司要求开发小程序,有个功能是通过低功耗蓝牙进行数据获取。由于本人是Android手机(苹果也有基本不用),所以调试一直用的都是...ios端的name和localName是不一致的,所以用ios小程序显示的是E04-BT
  • 小程序兼容各个ios版本

    千次阅读 2019-01-24 15:54:39
    本篇文章记录的是小程序兼容的ios 6.7.7 ,plus, x及xs等等,最后方式设计人员应该看懂的设计方式(会了才能开发设计搞…) 第、各个iphone的尺寸 绝对是帮你解决各种问题的表,对应微信开发工具去设置,还用什么...
  • 出现这个问题一般来说是服务器...去证书提供商下载证书一般是三个文件,两个crt,个key文件。 下面说下宝塔面板证书合并方法。。以阿里云提供的证书为例。。 key证书还是放左边,关键是两个crt证书,把public结尾的
  • 微信小程序,将文字转换为语音后,使用音频进行播放。在安卓手机下可以正常播放,在IOS下不行。 【环境】 微信小程序库版本2.3.0 百度语音合成服务 【解决方法】 正确代码: //创建个音频实例 const myaudio...
  • 小程序开发中我们经常遇到,文本内容过长导致页面样式花掉的问题,这时候我们就需要限制文字显示长度,经常用的方法就是隐藏多出来的文字显示点点点 单行文本过长显示点点点 .row { width: 400rpx; overflow: ...
  • 很难受 这个问题不知道为啥官网不解决 如果说外层元素 使用 弹性布局 那么里面的那个 input输入框 得光标...2.给 input元素加上个 enableNative="{{false}}" <view style="display:flex;"> <input enableNa
  • 公司项目设计蓝牙ble门禁的设备,范围拓展到支付宝小程序内,写小程序的人不管是android还是ios都是需要适配对方os的,如果是前端的话,可能更是脸蒙蔽的,我是android,在适配ios遇到了很多坑.完成次开门是分包发送两...
  • 解决方法:通过after伪类,使得当前行不是最后一行 <view class="box"> 文字居中 </view> .box{ width: 200px; text-align: justify; } .box:after{ content: ''; width: 100%; display: inlin
  • 在写页面的时候遇到个问题:需要对某件商品进行描述,但是往往描述文字过长,如果全部次性显示可能对样式的一致性造成破坏,影响页面美观,于是我联想到了之前在很多网站上见过省略部分文字的方法,决定自己实践...
  • 小程序文本超出一行显示省略号… 平常都是直接css操作如以下就行了,但是细心的产品发现一个平时被忽略的问题,安卓和ios的省略号显示效果不一样,安卓的…是居中显示ios的下沉显示!这个有办法让安卓像ios一样...
  • HBuilder X分为标准版和App开发版,如果你需要将UNI-APP的项目做成app的话就需要下载App开发版,只做小程序的话,下载标准版就ok了。 运行到微信小程序 1、设置一下微信开发者工具的路径 顶部导航栏----->运行--...
  • 这段时间开发个微信小程序的点餐系统,因为只需要小程序版本,所以就用原生的小程序写了,过程中遇到了几个问题和坑,就总结一下,方便来后者。 商品分类和商品列表的左右联动,像美团和饿了么那样的交互,点击某个...
  • 小程序 textarea ios兼容解决

    千次阅读 2018-10-31 16:35:00
    今天遇到,在小程序里textarea会存在一定的兼容性问题,textarea有默认的内边距,在安卓和ios显示的时候,ios边距会比安卓的大很多。 解决办法: 通过 wx.getSystemInfoSync()获取手机的机型;然后判断是ios还是...
  • 最近想研究下微信小程序,拿自己网站的接口做了个 遇到的几个小问题给大家分享下 、异步请求的网址只支持https协议,所以调用接口用另外的个域名做了个跳转 二、下拉刷新 直接在js中监听这个事件就,下拉...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 73,740
精华内容 29,496
关键字:

小程序ios中文字没有显示一行

友情链接: pseuro__schedule.rar