3

我需要实现以下标记： 在此处输入图像描述

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

我想写一个模板，用 XSL 将文本分成几行，然后<p>用border-bottomset 将每一行打印为不同的段落。有没有更简单的方法可以通过 HTML+CSS 实现这一点？

一个小的更新：这里的重点是让这个下划线延伸到文本之外并占据所有可用的宽度。所以所有行的长度都相同（就像字帖中的行），除了第一行可能更短

4

5 回答 5

10

您可以使用内联元素，例如<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 中的结果：

在此处输入图像描述

除此之外，恐怕您可能不得不将您的线路包装在一些容器中。

于 2012-11-06T11:14:08.150 回答
1

使用纯标记可能不会比这更好：jsfiddle demo。

编辑
根据问卷的评论更新：

预习：
在此处输入图像描述

p span.indent {
    width: 160px; height: 30px;
    vertical-align: top;
    background: #fff;
    display: inline-block;
}

p span.strike {
    color: #000;
    text-decoration: line-through;
}    

p del {
    color: #ff0000;
    text-decoration: none;
}

p {
    width: 490px;
    font-family: Arial, sans-serif;
    line-height: 30px;
    background: url('http://img84.imageshack.us/img84/1889/63051094.gif') left top;
}

<p>
    <span class="indent"></span><span class="strike"><del>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</del></span> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
</p>
于 2012-11-06T11:23:34.243 回答
0

HTML

<div id="content">
<p><span id="strike">some content that you need to display</span>
<span id="underline">Some more content that will come here</span></p>
</div>​

CSS

    #content
    {
        height:auto;
        width:200px;
    }
    #content #strike
    {
        text-decoration:line-through;
        color:Red;
    }

    #content #underline
    {
     text-decoration:underline;   
    }

    span
   {
    border-bottom:4px solid Black;
   }

现场样品 ​</p>

于 2012-11-06T11:12:13.947 回答
0

围绕您想要格式化的内容创建一个 div，并在 CSS 中使用该 div 来进行必要的格式化。

于 2012-11-06T11:03:27.817 回答
0

您实际上并不需要每一行都位于其自己的 HTML 元素中以具有底部边框。您可以将边框应用于内联元素，并且边框将应用于元素中的每一行。

为了使删除线颜色与文本颜色不同，您还需要一个额外的 HTML 元素。（虽然Firefox 已经实现了-moz-text-decoration-color。）

HTML

<span class="fake-underline">
    <del><span>Final blitz by Obama and Romney as election arrives.</span></del> Candidates attend rallies late into the night as US prepares to go to the polls.
</span>

CSS

.fake-underline {
    line-height: 2;
    border-bottom: solid 5px black;
}
del {
    text-decoration: line-through;
}
del span {
    color: red;
}
于 2012-11-06T11:26:24.070 回答