需要显示带有等长下划线的多行文本 [英] Need to display multiline text with underlining lines of equal length

问题描述

我需要实现以下标记:

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

我想到编写一个模板，该模板将使用XSL将文本分成几行，并将每一行作为设置为border-bottom的不同段落<p>打印.有没有更简单的方法可以通过HTML + CSS来实现?

一个小更新:这里的要点是使该下划线延伸到文本之外并采用所有可用宽度.因此，除了第一行可能更短

之外，所有行都具有相同的长度(就像习字簿中的行一样)

解决方案

您可以使用内联元素，例如<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在内的最新浏览器中有效./p>

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浏览器中的结果

---

除此之外，恐怕您可能必须将行包装在某些容器中.

I need to implement the following markup:

The problem is that I can use only HTML+CSS and XSLT to produce it.

I thought of writing a template that would split the text into lines with XSL and print each line as a different paragraph <p> with border-bottom set. Is there a simpler way to achieve this by means of HTML+CSS?

A small update: The point here is to have this underline extend past the text and take all the available width. So all lines are of the same length (like lines in a copybook), except the first one which may be shorter

解决方案

You can use an inline element such as <span> which will treat border-bottom like underline:

<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>

and CSS:

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

Demo here.

Result using the markup above:

EDIT:

1.

Extending @aefxx's answer, if you can use CSS3 try this:

.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;
}

​Demo here - this will only work in the latest browsers including Firefox and Chrome.

Result in Chrome:

---

2.

If you're happy with justified text:

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;
}

Demo here. ​There are some issues with line-height but should be easy to figure out.

Result in Chrome:

---

Other than that, I'm afraid you might have to wrap your lines in some containers.

这篇关于需要显示带有等长下划线的多行文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！