Skip to content
uniapp 使用 html2canvas 截图文字换行问题

需求就是文字要在第二行开始溢出显示省略号,第一行自动换行,但是页面上面效果已经实现了,但是使用html2canvas截图的时候,第二行文字没有换行,导致截图的时候第二行文字没有显示,但是在页面上面是换行的,个人猜测是内部渲染时,文字大小变小了,导致没达到换行条件,百度了一堆没找到合适的解决办法,最后只能自己手动换行了,使用了一个笨方法,供参考,代码如下:

js
<view class="flex flex-col justify-start w-370">
	<text class="text-36 text-nowrap PingFang_SC_Semibold leading-50">
		{{'这是一个很长很长很长很长很长很长很很长的文字'.substring(0, 10)}}
	</text>
	<text v-if="'这是一个很长很长很长很长很长很长很很长的文字'.length > 10" class="text-36 truncate PingFang_SC_Semibold leading-50">
		{{'这是一个很长很长很长很长很长很长很很长的文字'.substring(10)}}
	</text>
	<text class="text-24 truncate text-[#FFFFFF99] PingFang_SC_Regular">{{data.venue_info.address}}</text>
</view>

简单粗暴,直接自己将文字截取两行,如果文字没达到换行标准就不显示第二行,这个是我目前实现的笨方法,各位有好方法可以一起分享