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

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
}