html - 行数可变的上划线和下划线文本

Question

我需要在现场使用文档模板，但在准备具有此类复杂格式的模板时遇到了问题:

No underline here:  TEXT UPPER TEXT UPPER TEXT UPPER TEXT UPPER 
                    -------------------------------------------
                     descriptive subtext descriptive subtext

CONTINUE UPPER TEXT UPPER TEXT UPPER TEXT UPPER TEXT UPPER 
------------------------------------------------------------
continue subtext descriptive subtext descriptive subtext 

所以上面的文本是我将从表单添加到模板中的文本，而子文本是文本是描述性注释。 问题是两个文本的行长都是可变的，并且在填充之前无法确定并且经常插入的文本在多个字符串中。

这种变体适用于上面的文本并在其下划线，但我不知道如何在那里添加子文本......

<span>This is intro text without underline: </span><span style='border-bottom: 1px solid black; line-height: 50px;'>Nunc venenatis nibh nec odio gravida, ac ultricies lectus sagittis. Nam magna lorem, sagittis sed dignissim at, luctus eu magna.Nunc venenatis nibh nec odio gravida, ac ultricies lectus sagittis. Nam magna lorem, sagittis sed dignissim at, luctus eu magna.Nunc venenatis nibh nec odio gravida, ac ultricies lectus sagittis.</span>

JSFiddle examle

Answer 1

如果您的线路较短:

你能使用描述列表吗？像这样设置列表:

<dl>
  <dt>Coffee</dt>
    <dd>black hot drink</dd>
  <dt>Milk</dt>
    <dd>white cold drink</dd>
</dl>

和 CSS 样式。

dt {
     text-decoration: underline;
     text-transform: uppercase;
}

dd {
    margin-left:0;
}

参见 this fiddle

对于较长的行:

您可以使用 div 的绝对定位和 2 的行高。您基本上将两个 div 的行间距设置为 2，然后将较低的 div 1em 定位在最上面的下面。 HTML 代码如下:

<div class="topline">TEXT UPPER TEXT UPPER TEXT UPPER TEXT UPPER</div>
<div class="bottomline">descriptive subtext descriptive subtext</div>

然后是 CSS:

.topline {
    text-decoration: underline;
    text-transform: uppercase;
    line-height: 2;
    position:absolute;
    top:0;
    left:0;
}

.bottomline {
    margin-left:0;
    line-height: 2;
    position:absolute;
    top:1em;
    left:0;
}

参见 this fiddle .