美文网首页
html2canvas border-bottom 多行错位

html2canvas border-bottom 多行错位

作者: _若无 | 来源:发表于2021-01-27 15:09 被阅读0次

    html2canvas border-bottom 多行错位,只在最后一行显示并且还错位
    效果如下图:


    image.png

    页面代码如下:

    .cnt {
        color: #ffcd03;
        text-align: center; 
        border-bottom: 0.04rem solid #fff;
    }
    <p class="d">
        <label class="fl">我是来测试啦~</label>&nbsp;
        <span class="cnt" id="duiname>测试html2canvas多行文本内容是设置border-bottom错位啦</span>&nbsp;,
        <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>&nbsp;<span class="cnt">测试html2c</span>
        <p><span  class="cnt" id="duiname">anvas多行文本内容是设置</span></p>
        <p>
             <span  class="cnt" id="duiname">border-bottom错位啦</span>&nbsp;
             <span id="duiclasses">,为啥子呢?沃德天</span>
        </p>    
    </p>
    

    最终实现了效果:


    image.png

    ps: html2canvas使用版本最稳定的是rc4,千万不要用rc5,rc5版本在ios13系统下不能生成图片

    PS: 使用css的 text-decoration下划线,再Android上生成图片是正常,在Ios依旧下滑线位置错乱

    color: #ffcd03;
    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;
    展示如下图

    IOS css展示

    相关文章

      网友评论

          本文标题:html2canvas border-bottom 多行错位

          本文链接:https://www.haomeiwen.com/subject/oblazktx.html