需要显示带有等长线下划线的多行文本

Question

我需要实现以下标记:

问题是我只能使用HTML + CSS和XSLT来生成它.

我想写一个模板,将文本分成XSL行,并将每行打印为<p>带有border-bottomset 的不同段落.是否有更简单的方法通过HTML + CSS实现这一目标？

一个小小的更新:这里的要点是让这个下划线延伸到文本之后并占用所有可用的宽度.因此所有行都具有相同的长度(如字帖中的行),除了第一行可能更短

Answer 1

您可以使用一个内联元素,例如<span>将治疗border-bottom像下划线:

<p>
    <span>
        <del>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</del> sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
    </span>
</p>

和CSS:

span {
    border-bottom: 4px solid black;
}
del {
    color: red;
}

在这里演示.

结果使用上面的标记:

编辑:

1.

扩展@ aefxx的答案,如果你可以使用CSS3试试这个:

.strike {
    background-image: -moz-linear-gradient(top , rgba(255, 255, 255, 0) 34px, #000000 34px, #000000 38px);
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0) 34px, #000000 34px, #000000 38px);
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 34px, #000000 34px, #000000 38px);
    background-repeat: repeat-y;
    background-size: 100% 38px;
}
p {
    line-height: 38px;
}
p:before {
    background: #fff;
    content:"\00a0";
    display: inline-block;
    height: 38px;
    width: 50px;
}
del span {
    color: red;
}

在这里演示 - 这只适用于最新的浏览器,包括Firefox和Chrome.

Chrome中的结果:

2.

如果您对合理的文本感到满意:

p,span {
    border-bottom: 4px solid black;
    line-height: 30px;
    text-align: justify;
    text-indent: 50px;
}
p>span {
    padding-bottom: 5px;
    vertical-align: top;
}
del span {
    border-bottom: 0 none;
    color: red;
}

在这里演示.线高有一些问题,但应该很容易理解.

Chrome中的结果:

除此之外,我担心你可能不得不把你的线包裹在一些容器中.