文档章节

微信小程序text文本溢出单行/多行省略

暖冰
 暖冰
发布于 2017/01/24 12:21
字数 133
阅读 2355
收藏 2

在做小程序的时候遇到在text标签里面的文本过长,需要限制显示长度,并且在限制了长度的后面加上省略号代表后面还有内容。

这时候设置样式:

.note_item text{
    display: -webkit-box;
    font-size:28rpx;
    color:#000000;
    line-height: 40rpx;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:3;
    overflow: hidden;
    text-overflow:ellipsis;
}

如果只显示单行的话:

.note2_item text{
    display: block;
    font-size:28rpx;
    color:#000000;
    line-height: 40rpx;
    height: 120rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}

这里两个display是不同的

© 著作权归作者所有

暖冰
粉丝 56
博文 124
码字总数 116908
作品 1
美国
程序员
私信 提问
div和表格中文字溢出时折行显示的处理

当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果我们不想让他换行显示那要怎么办呢?看到这个标题很容易就会想到截断文字加“...”的做法。 一般的文字截断(适...

prfy520
2013/12/18
1K
0
微信小程序获取二维码接口整理,前台获取二维码

一、说明 小程序获取二维码常用接口B 指定小程序AccessToken ,指定二维码参数 使用 Post方式提交就返回二维码图片 二、获取小程二维码步骤 1.获取access_token 小程序的token获取和公众号获...

tianma3798
2018/05/12
504
0
微信小程序rich-text 文本首行缩进和图片居中

微信小程序开发使用rich-text组件渲染html格式的代码,常常因为不能自定义css导致文本不能缩进,以及图片不能居中等问题,这里可以考虑使用js的replace方法,替换字符串,然后在渲染的同时加...

飞翔的熊blabla
02/12
0
0
搞定了微信小程序富文本渲染解决方案-后端渲染方案Html2Wxml2J

先介绍一下最近遇到的问题: 最近小程序项目中有文章详情页需要渲染富文本,微信小程序官方提供的<rich-text>是个弱鸡,很多标签不支持,用起来也麻烦,性能也不咋地。 吐槽完了,我们决定寻...

山东-小木
2018/11/18
4K
5
css中text-overflow:ellipsis文本溢出产生省略号

text-overflow : clip | ellipsis 参数:   clip :  不显示省略标记(...),而是简单的裁切 (PS:clip这个参数是不常用的!)   ellipsis :  当对象内文本溢出时显示省略标记(...)...

Reya滴水心
2015/08/12
61
0

没有更多内容

加载失败,请刷新页面

加载更多

Executor线程池原理与源码解读

线程池为线程生命周期的开销和资源不足问题提供了解决方 案。通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上。 线程实现方式 Thread、Runnable、Callable //实现Runnable接口的...

小强的进阶之路
昨天
6
0
maven 环境隔离

解决问题 即 在 resource 文件夹下面 ,新增对应的资源配置文件夹,对应 开发,测试,生产的不同的配置内容 <resources> <resource> <directory>src/main/resources.${deplo......

之渊
昨天
8
0
详解箭头函数和普通函数的区别以及箭头函数的注意事项、不适用场景

箭头函数是ES6的API,相信很多人都知道,因为其语法上相对于普通函数更简洁,深受大家的喜爱。就是这种我们日常开发中一直在使用的API,大部分同学却对它的了解程度还是不够深... 普通函数和...

OBKoro1
昨天
7
0
轻量级 HTTP(s) 代理 TinyProxy

CentOS 下安装 TinyProxy yum install -y tinyproxy 启动、停止、重启 # 启动service tinyproxy start# 停止service tinyproxy stop# 重启service tinyproxy restart 相关配置 默认...

Anoyi
昨天
2
0
Linux创建yum仓库

第一步、搞定自己的光盘 #创建文件夹 mkdir -p /media/cdrom #挂载光盘 mount /dev/cdrom /media/cdrom #编辑配置文件使其永久生效 vim /etc/fstab 第二步,编辑yun源 vim /ect yum.repos.d...

究极小怪兽zzz
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部