首先单个的长单词默认是不换行的,需要设置 word-break: break-all;
, 然后微信的 cover-view 中如果只有单个长单词设置了word-break: break-all;
虽然能换行但 cover-view 不会自动调整高度,导致换行后的文本根本看不见,但 white-space:pre-wrap;
的换行 cover-view 却会自动调整高度。
所以我的思路就是在单个的长单词或者长数字后面影藏另外一个单词利用 white-space:pre-wrap; 换行来完整的展现出长单词,实例如下:
<cover-view
class="fb npp-red"
style="font-weight:bold;font-size:16px;white-space:pre-wrap;word-break: break-all;height:auto;overflow: visible;"
>
¥{{ count_cart_discounts.activityTotalAmount }} <cover-view style="color:transparent">1</cover-view>
</cover-view>
这里的 count_cart_discounts.activityTotalAmount
就有可能是一个长数值。结果出现了被截断显示不完整的bug 通过后面隐藏的 <cover-view style="color:transparent">1</cover-view>
成功全部显示出来了