【微信小程序】微信小程序 文本过长，自动换行的问题

最新推荐文章于 2024-04-29 16:34:48 发布
最新推荐文章于 2024-04-29 16:34:48 发布
阅读量6.4k 收藏 7
点赞数 5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35309220/article/details/86601055
版权

小程序开发过程出现的问题：

文本过长，以致于在view中显示不全，没有自动换行的问题
在这里插入图片描述
解决方法：

在wxss样式文件中添加样式

.font-break {
  word-break:break-all;
}

然后在对应的view上引用即可

<view class="col-4 font-break">
          {{item.billCode}}
        </view>

效果：
在这里插入图片描述

红鼻子大嘿
关注
  • 5
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
解决微信小程序scroll-view换行问题
01-03
今天在写小程序的时候使用了scroll-view,但是发现在scroll-view中一行文字不能换行，代码如下： ...在网上搜索了一下小程序scroll-view文字不能换行的问题后，发现原来是小程序组件有一个默认的样式 white-space: nowr
微信小程序 实现自动换行
JxufeCarol的博客
06-10 1万+
参考链接： （1）微信小程序自动换行 https://blog.csdn.net/Hero_rong/article/details/100134634 （2）小程序 显示3个一排 自动换行 https://blog.csdn.net/fatong3/article/details/102903703 一、方法1：css word-break word-break: break-all; 在需要换行的view上添加这个样式即可。 二、方法2：css width % 如显示3个一排。 使用的是width:
微信小程序中/换行/空格写法
最新发布
偏执
04-29 1239
t 空格（ 多个只会显示一个空格）友情提示：必须在标签中！
微信小程序 自动换行的实现
u012329294的专栏
04-04 2万+
微信小程序中的自动换行，实现代码如下：wxml： &lt;view class='header'&gt;服务类型&lt;/view&gt; &lt;view class='ff_anniu' &gt; &lt;view class='ff_item' wx:for='{{categorys}}' wx:key='{{index}}'&gt; &lt;view class='ff...
微信小程序中换行空格（多个空格）写法详解
08-27
在微信小程序开发中，...如果你在实际开发中遇到问题，可以查阅微信小程序的官方文档或者寻求社区的帮助。同时，也欢迎在下方留言讨论，共同学习进步。感谢您对本文的关注，希望这些信息能对您的小程序开发有所帮助！
详解微信小程序-canvas绘制文字实现自动换行
10-17
主要介绍了微信小程序canvas绘制文字实现自动换行，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序在text文本实现多种字体样式
10-16
本文将深入探讨如何在微信小程序的wxml和wxss中处理这一问题。 首先，我们要明白微信小程序的wxml并不支持HTML中的常规元素如`<span>`、`<div>`等。这意味着我们不能直接通过嵌套不同样式的元素来实现文本样式的...
微信小程序-开发的小说阅读器源代码
05-09
微信小程序是一种轻量级的应用开发平台，主要针对移动端，由腾讯公司推出，旨在提供便捷的、无需下载安装即可使用的应用服务。在这个项目中，我们讨论的是一个基于微信小程序开发的小说阅读器源代码，它实现了小说...
微信小程序自动换行
Hero_rong的博客
08-29 2275
word-break: break-all; 在需要换行的view上添加这个样式即可
小程序 input 换行_好程序员web前端学习路线分享CSS浮动-文档流篇
weixin_39600704的博客
12-01 1134
1、纯文本的排列。文档流就像我们的文本内容一样，所有的文字都会紧挨着，一个个排列下来，如果到了边界，就会换一行排列。当然如果敲回车或者按下空格键一般都会认为是一个词间距，因为英文中每个单词之间是有距离的，不像中文每个汉字连在一起的。所以不管你敲了几个回车，不管你敲了几个空格。程序都认为只有一个词间距的空格距离。我们把这种现象称为空白折叠现象。下图中的红色箭头就是我们敲了回车和敲了空格的效果。2、文...
小程序 input自动换行_微信小程序如何更好的做自动化性能监测？
weixin_39748183的博客
11-12 557
目前，许多团队的微信小程序都在自动化测试的探索，本文从自动化测试过程中产生的数据进一步分析，得出相关的性能指标，为后续的性能优化做数据支持。一、自动化测试框架选择对于微信小程序的测试框架的选择问题上，个人觉得仅仅在于是否使用FAutoTest，这个由腾讯TBS出品的测试框架。该框架对基于TBS内核应用的测试上是非常友好的，但该框架的优势仅仅停留在在早期的小程序版本，其内核能切换至Webv...
微信小程序文本超出自动换行
热门推荐
a1057962851的博客
11-25 2万+
position: absolute; text-overflow:ellipsis; word-wrap:break-word
小程序 text decode 真机无效_【移动端测试】APP自动化测试案例2：微信小程序自动化测试...
weixin_39955154的博客
10-22 139
APP自动化测试之案例：微信小程序自动化测试1.前提基于win10专业版64位系统+jdk1.8+python3+pycharm+android SDK+appium+unittest。2.痛点2017年1月9号微信小程序正式上线，不需要安装，只要在微信里找到这个小程序打开即可使用。以前测试手机端会接触到原生应用、H5应用和混合型应用（即原生+H5），现在又多了个小程序。我们该如何测试微信小程序呢...
小程序 input自动换行_小程序消息自动回复
weixin_39936134的博客
11-25 1359
本篇文章，主要说明利用独立部署的系统，完成小程序客服消息自动回复的方法，以下是我们使用的系统源码获取方式以及说明。源码名称：微信小程序客服消息自定义关键词回复管理系统框架版本：laravel5.8，和thinkphp类似的框架，会thinkphp就会laravel。适用范围：二次开发，独立部署，客服自动回复付费版获取地址：https://www.chtml.cn/product/show/1100...
小程序中文本自动换行
weixin_43398820的博客
08-17 4750
后端返回的文本自动换行 要求后端返回的文本在需要换行的地方增加\n 原生小程序中直接使用text标签即可，text中的文本遇到\n会自动换行。 // data: { // message:'这是第一个换行；\n,这是第二个换行；\n这是第三个换行；\n' // }, <text>{{message}}</text> taro框架中换行 // state = { // message: "这是第一个换行；\n,这是第二个换行；\n这是第三个换行；\
微信小程序大段文本内容过多，实现折叠与展开效果解决方案 以及 多行文本溢出隐藏不生效的解决方案
XH_jing的博客
10-15 7859
实现场景： 一个列表的文章内容过长，显示的时候要省略显示，但是还要有一个展开查看全文的点击事件，可以实现展开与折叠。 实现思路： 使用两层容器，父标签设置max-height，预计成要显示行数的高度，并且使用overflow:hidden; 溢出隐藏； 然后使用SelectorQuery wx.createSelectorQuery()query去查子标签的高度，如果子标签的高度高一些，就显示这个展开按钮； 2.1 针对使用wx:for循环来渲染的列表，可以在wx:for的标签上，加个class，s
wxss、css给长文本设置自动换行
weixin_62797596的博客
06-07 989
小程序项目时候所用到的文章内容渲染的布局样式：自动换行
微信小程序 自动换行
10-17
微信小程序中，可以使用 `text` 组件来显示文本内容，该组件默认是不支持自动换行的。但是可以通过设置 `style` 属性来实现自动换行，具体方法如下： 1. 在 `text` 组件中设置 `style` 属性，如下所示： ```html <text style="white-space:pre-wrap;">这是一段需要自动换行的文本内容</text> ``` 2. 在 `style` 属性中设置 `white-space` 属性为 `pre-wrap`，表示保留空白符并自动换行。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值