微信小程序-----文本溢出

最新推荐文章于 2024-06-01 15:59:18 发布
最新推荐文章于 2024-06-01 15:59:18 发布
阅读量2w 收藏 5
点赞数 11
分类专栏： 毛草屋 文章标签： 微信小程序 微信小程序文本溢出 微信小程序文本换行

文本溢出是一个非常常见的问题，尤其是在手机端上

这是理想中的状态，但是对于长标题来说，可能就要崩溃了

轻者换行

重者样式崩坏

当一行文字超过了限定范围，就会出现换行等现象，这就叫文本溢出
该如何解决文本溢出呢，其实只要短短一块css代码即可

现在界面好看了吧（至少从我的审美出发还可以）

超出的范围会用“…”来代替

友情提示：一定要设定宽度，才会有效果

有单行溢出自然就会有多行溢出
多行会稍微复杂点，因为包括了显示几行，文本隐藏的问题，这里就不调试了，直接贴上代码给大家测试

不 想写代码的码农
关注
  • 11
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
订阅专栏
微信小程序 scroll-view 水平滚动实现过程解析
10-16
在微信小程序开发中，`scroll-view` 是一个非常重要的组件，它允许开发者实现滚动效果，尤其是在处理长列表或需要水平滚动的场景时。本篇文章将深入解析如何利用 `scroll-view` 实现水平滚动功能。 首先，`scroll-...
微信小程序 多行文本显示…+显示更多按钮和收起更多按钮功能
12-30
还是找微信小程序官方文档，自己写比较方便。自己动手丰衣足食！话不多说，上代码！ 时空传送 先来个效果图 html <view class=textFour_box>{{item.text}} <view class=text_toggle_box wx:if='{{item....
微信小程序：多行文本溢出出现多余的文字-webkit-line-clamp
彭世瑜的博客
03-31 2259
多行文本溢出隐藏css样式 .line-2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /*限制文本行数*/ -webkit-box-orient: vertical; word-break: break-all; /* 追加这一行代码 */ } 模拟器上表现良好，真机测试发现有文字漏出来了 将文本高度设置为自动就正常了 line-height:
微信小程序中rich-text文本溢出（三个...）
weixin_30852451的博客
07-10 1746
小程序中当rich-text中数据较多时就会出现溢出的现象 如下 此时的页面效果并不是很理想 我们可以在数据中给个div <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis">55555555555555555555555555555555555</div...
微信小程序：实现用户输入多行文字的功能
最新发布
mingangel的博客
06-01 333
微信小程序：实现用户输入多行文字的功能。使用. 其次需要实现记忆存储的功能，则需要进行打开页面即调用存储的内容。 使用wx.setStorageSync进行保存内容，wx.getStorageSync进行调用。
微信小程序解决富文本溢出问题
m0_47584616的博客
08-20 412
//接收后台接口返回来的值 this.setData({ rich: res.data.replace(/\<img/gi, '<img class="richImg" ') }) .richImg { width: 100%; height: auto; } 但是这种方法返回的图片有默认宽度的时候无效 formatRichText(html){ let newContent= html.replace(/<img[^>]*&.
小程序文字超出处理
玲曦的博客
07-16 1606
1.单行：父级容器加overflow: hidden;否则不显示省略号 .text { overflow: hidden; font-size: 28rpx; white-space: nowrap; text-overflow: ellipsis; } 2.多行 .text { overflow: hidden; line-height: 38rpx; font-size: 38rpx; tex...
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
11-27
微信小程序是一种轻量级的应用开发平台，它允许开发者在微信内构建原生体验的应用，无需安装即可使用。本文将深入探讨微信小程序中的“扫一扫”功能，即`wx.scanCode()` API，该功能使得用户能够扫描二维码或条形码...
微信小程序Text空格符号以及省略的展示
03-30
在微信小程序开发中，`Text`组件是用于展示文本内容的核心元素。本文将详细探讨`Text`组件在处理空格符号和文本省略显示时的关键知识点。 首先，让我们了解一下`Text`组件的基本用法。在微信小程序中，`<text>`标签...
微信小程序实现多行文字超出部分省略号显示功能
10-16
在微信小程序的开发过程中，有时候我们需要对长文本进行合理的展示，特别是在列表中，为了保持界面的整洁和美观，我们可能需要限制文字的显示行数，超出部分则用省略号表示。本文将详细介绍如何在微信小程序中实现这...
微信小程序（5）——文字溢出断尾显示省略号
蜗牛先生
08-02 7674
▍写在前面（来访者请直接浏览下一条） 在写页面的时候遇到一个问题：需要对某件商品进行描述，但是往往描述文字过长，如果全部一次性显示可能对样式的一致性造成破坏，影响页面美观，于是我联想到了之前在很多网站上见过省略部分文字的方法，决定自己实践一次。 ▍效果预览 先贴上最终实践效果： ▍实现方法 【注意】为了能更清晰的了解文字超限断尾的使用方法，以下所有css代码将省略全部关于...
微信小程序内解决view内文字过多溢出
Pumily的脱发历程
10-16 3848
【代码】微信小程序内解决view内文字过多溢出。
【uni-app】微信小程序如何轻松判断文本溢出显示展开按钮
向着光芒的女孩
03-01 1670
一个父容器来控制文本溢出，让父容器默认overflow:hidden,一个内联子容器来放文本，文本容器的高度>父容器的高度，则说明溢出了
小程序文本溢出隐藏
buddha_coder的博客
08-07 2930
多行文本            .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;...
微信小程序 文本超出部分用省略号代替
KeBo's Blog
07-26 3312
核心是这三个属性： . { overflow: hidden; white-space: nowrap; text-overflow:ellipsis; } 值的注意的是： 应将这三个属性作用在 text 标签上， 而不是text的父标签。...
微信小程序文本溢出设置
Heartnottowake的博客
05-01 802
overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; /*设置对其模式 */ -webkit-line-clamp: 2; /*设置多行的行数*/
小程序进阶-长（多行）文本内容展开与收起、单行文本溢出隐藏
weixin_43166227的博客
07-01 3635
多行文本和单行文本内容溢出隐藏，多行文本展开与收起。
微信小程序 获取某个元素节点的高度
岁末zzz的博客
07-01 2635
let query = wx.createSelectorQuery(); let that = this query.select('#meat').boundingClientRect(rect => { let clientHeight = rect.height; let clientWidth = rect.width; let ...
微信小程序——CSS限制文字宽度和行数（溢出显示省略号）
XSL_HR的博客
06-01 2914
手把手教你学会用CSS限制文字宽度和行数
微信小程序 - this.triggerEvent()
06-09
这是一个微信小程序中的事件触发函数，可以用来触发自定义组件的事件。在组件中定义一个事件，然后通过调用该函数来触发该事件。该函数需要传入两个参数：事件名称和事件对象，事件对象可以包含任意属性和值。被触发的事件可以在父组件中通过监听函数来处理。例如，一个自定义组件中定义了一个名为"myEvent"的事件： ``` Component({ methods: { onTap() { const eventDetail = { msg: 'hello' } const eventOption = {} this.triggerEvent('myEvent', eventDetail, eventOption) } } }) ``` 在父组件中监听该事件： ``` <custom-component bind:myEvent="onMyEvent"></custom-component> ``` 处理函数： ``` Page({ onMyEvent(event) { console.log(event.detail.msg) // 输出 "hello" } }) ```
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值