【微信小程序】使用scroll-view文字不换行的问题

WallingDown

已于 2022-04-14 15:02:45 修改

阅读量2.5k

点赞数

分类专栏： vue 微信小程序文章标签：微信小程序

于 2022-04-14 14:47:05 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43994760/article/details/124167948

版权

vue 同时被 2 个专栏收录

8 篇文章

订阅专栏

微信小程序

5 篇文章

订阅专栏

本文主要探讨了微信小程序中scroll-view组件在显示长文本时遇到的不换行问题。当内容区域设置为固定高度并开启纵向滚动时，由于默认样式white-space:nowrap，导致英文等长内容无法正常换行。解决方法是在CSS中添加word-break:break-all属性，强制文本在必要时换行，从而确保内容在限定区域内正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 属性

scroll-view 可滚动视图区域
scroll-y 设置纵向滚动，需要给scroll-view一个固定高度

2. 遇到的问题

△ 描述：scroll-view中一行的文字不能换行，比如：一大段的内容为英文时，全部显示在同一行里。直接超出了当前元素的父元素。

3. 分析&解决

△ 原因：小程序组件有一个默认的样式：white-space: nowrap; 默认是不换行的！
△ 解决：使用css的文字换行word-break:break-all，代码如下：

<!-- 填写内容区域 -->
<scroll-view scroll-y="true" class="contentCon">
	{{ contentTxt }}
</scroll-view>

// 内容区域
.contentCon{
	margin: 0 auto;
	padding: 16rpx 24rpx;
	width: 508rpx;
	height: 576rpx;
	line-height: 48rpx;
	color: #191B1E;
	font-size: 28rpx;
	background: #F6F7F8;
	word-break: break-all; // important
}