html2canvas border-bottom 多行错位,只在最后一行显示并且还错位
效果如下图:
image.png
页面代码如下:
.cnt {
color: #ffcd03;
text-align: center;
border-bottom: 0.04rem solid #fff;
}
<p class="d">
<label class="fl">我是来测试啦~</label>
<span class="cnt" id="duiname>测试html2canvas多行文本内容是设置border-bottom错位啦</span> ,
<span id="duiclasses">为啥子呢?沃德天</span>
</p>
修改如下:
添加一个从第二行开始包一层标签(p、div),注意千万不要用span
.cnt {
color: #ffcd03;
text-align: center;
border-bottom: 0.04rem solid #fff;
}
<p class="d">
<label class="fl">我是来测试啦~</label> <span class="cnt">测试html2c</span>
<p><span class="cnt" id="duiname">anvas多行文本内容是设置</span></p>
<p>
<span class="cnt" id="duiname">border-bottom错位啦</span>
<span id="duiclasses">,为啥子呢?沃德天</span>
</p>
</p>
最终实现了效果:
image.png
ps: html2canvas使用版本最稳定的是rc4,千万不要用rc5,rc5版本在ios13系统下不能生成图片
PS: 使用css的 text-decoration下划线,再Android
上生成图片是正常,在Ios
上依旧下滑线位置错乱
color: #ffcd03;
IOS css展示
text-align: center;
/* text-decoration:underline;
-webkit-text-decoration:underline;
text-decoration-color: #FFF;
-webkit-text-decoration-color: #FFF;
-moz-text-decoration-color: #FFF; /
/ text-underline-position: under; */
text-underline-position: right under;
text-underline-position: below;
展示如下图
网友评论