uniapp view或者text文本过长不能换行解决方案

今天在写项目的时候，遇到了一个令人很难受的点，我的text，或者view文本超出了之后就显示不出来了，用了display：flex；和flex：wrap；都没有用。后面百度了下，才发现uniapp里面flex:wrap;不生效，以下是解决方案：

<view class="product"  style="display:flex;padding-right: 30rpx;">
				<text >商品：</text>
				<text  class="gray9" style="width:80%;display:inline-block;white-space: pre-wrap; word-wrap: break-word;height: auto;">
					{{ detail.product}}
				</text>
		</view>

css样式最主要的是：

width:80%;display:inline-block;white-space: pre-wrap; word-wrap: break-word;height: auto;

white-space-设置如何处理元素内的空白

word-wrap-允许长单词或 URL 地址换行到下一行

参考文章

解决方式二：
一句css解决：word-break:break-all;