Javascript 如何在每个内部元素的文本结束行结束时使用条纹关闭文本内容

我有一个问题，我想在元素的offsetWidth小于主体宽度时自动关闭带条纹的元素中的行尾。

比如说

当我用条纹改变下划线时，它是这样的

测试
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
asgjdhgdgagdasda hasdahsdas asldsad asdjasdasdas
同样的道理，我们也不应该坐视不理，因为我们是精英，我们应该为自己的行为负责。
同样的道理，我们也不应该坐视不理，因为我们是精英，我们应该为自己的行为负责。
var td=$（“td[align='justify']））
var b_left=$（'body'）.offset（）.left，
宽度=$（'body'）。宽度（）；
对于（变量i=0；i

您可以试试这个

var td=$（“td[align='justify']））
var b_left=$（'body'）.offset（）.left，
宽度=$（'body'）。宽度（）；
对于（变量i=0；i

这似乎无法用看起来像连字符的背景图像处理，而不是附加文本和测试宽度

诀窍是在覆盖文本部分后面使用绝对定位的伪元素。为此，我们将内容包装在一个

span

元素中，该元素具有与页面相同的

背景色，并利用
线性渐变创建“破折号”

结果


CSS

td[align="justify"]{
    position:relative;
}
td[align="justify"]:before,
td[align="justify"]:after{
    content:"";
    position:absolute;
    top:0px;
    left:2px; /* handle span not reaching quite to the edge when using text-align:justify */
    right:2px; /* handle span not reaching quite to the edge when using text-align:justify */
    bottom:0px;
}
td[align="justify"]:before{
    /*
    COLOR NOTES:
    black = color of the "dash"
    */
    background-color:black;
}
td[align="justify"]:after{
    /*
    COLOR AND SIZING NOTES:
    rgba(255, 255, 255, 1) = background-color of page (white)

    First gradient runs left to right and creates the "gaps" in the black
    1px = "gap" of background color, then remainder transparent

    Second gradient runs top to bottom, we want a 1px line in the "middle" of our line-height
    (lineheight / 2) - (1px / 2)
    (18 / 2) - (1 / 2)
    9 - .5 = 8.5
    This creates a 1px high transparent "gap"
    */
    background-image: 
            linear-gradient(to right, rgba(255, 255, 255,1) 1px, rgba(255, 255, 255,0) 1px),
            linear-gradient(to bottom, rgba(255, 255, 255,1) 8.5px, rgba(255, 255, 255,0) 8.5px, rgba(255, 255, 255,0) 9.5px, rgba(255, 255, 255,1) 9.5px);
    /*
    SIZING NOTES:
    6px = 5px wide dash + 1px wide gap
    18px = text line-height
    */
    background-size:6px 18px, 6px 18px;
    background-repeat:repeat;
}
td[align="justify"] > span{
    background:rgb(255, 255, 255);
    position:relative;
    z-index:1;
}

HTML

<table>
    <tr>
        <td>Testingggggggggggggggggggggggggggggggggg</td>
    </tr>
    <tr>
        <td align="justify"><span>dasdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</span></td>
    </tr>
    <tr>
        <td align="justify">
            <span>asgjdhgdgagdasda hasdahsdas asldsad asdjasldsadas</span>
        </td>
    </tr>
    <tr>
        <td align="justify"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></td>
    </tr>
</table>
<table>
    <tr>
        <td align="justify"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></td>
    </tr>
</table>


测试
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
asgjdhgdgagdasda hasdahsdas asldsad asdjasdasdas
同样的道理，我们也不应该坐视不理，因为我们是精英，我们应该为自己的行为负责。
同样的道理，我们也不应该坐视不理，因为我们是精英，我们应该为自己的行为负责。

您的预期输出是什么？要用连字符（
-
/stripe）填充最后一个字符和
td
结尾之间的剩余空间？我可以问一下原因吗？我有一个报告格式，它的输出[如下]：*gl/Zoi8ET我正在使用mpdf将其生成pdf文件（颤抖）好的，撇开设计批评不谈，连字符不需要选择？它们只是为了显示行的结尾？是的，连字符只显示在行的最后一行
td[align="justify"]{
    position:relative;
}
td[align="justify"]:before,
td[align="justify"]:after{
    content:"";
    position:absolute;
    top:0px;
    left:2px; /* handle span not reaching quite to the edge when using text-align:justify */
    right:2px; /* handle span not reaching quite to the edge when using text-align:justify */
    bottom:0px;
}
td[align="justify"]:before{
    /*
    COLOR NOTES:
    black = color of the "dash"
    */
    background-color:black;
}
td[align="justify"]:after{
    /*
    COLOR AND SIZING NOTES:
    rgba(255, 255, 255, 1) = background-color of page (white)

    First gradient runs left to right and creates the "gaps" in the black
    1px = "gap" of background color, then remainder transparent

    Second gradient runs top to bottom, we want a 1px line in the "middle" of our line-height
    (lineheight / 2) - (1px / 2)
    (18 / 2) - (1 / 2)
    9 - .5 = 8.5
    This creates a 1px high transparent "gap"
    */
    background-image: 
            linear-gradient(to right, rgba(255, 255, 255,1) 1px, rgba(255, 255, 255,0) 1px),
            linear-gradient(to bottom, rgba(255, 255, 255,1) 8.5px, rgba(255, 255, 255,0) 8.5px, rgba(255, 255, 255,0) 9.5px, rgba(255, 255, 255,1) 9.5px);
    /*
    SIZING NOTES:
    6px = 5px wide dash + 1px wide gap
    18px = text line-height
    */
    background-size:6px 18px, 6px 18px;
    background-repeat:repeat;
}
td[align="justify"] > span{
    background:rgb(255, 255, 255);
    position:relative;
    z-index:1;
}

<table>
    <tr>
        <td>Testingggggggggggggggggggggggggggggggggg</td>
    </tr>
    <tr>
        <td align="justify"><span>dasdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</span></td>
    </tr>
    <tr>
        <td align="justify">
            <span>asgjdhgdgagdasda hasdahsdas asldsad asdjasldsadas</span>
        </td>
    </tr>
    <tr>
        <td align="justify"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></td>
    </tr>
</table>
<table>
    <tr>
        <td align="justify"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></td>
    </tr>
</table>