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

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

对于较长的行：

你可以使用 divs 的绝对定位和 2 的行高。你基本上将两个 divs 的行间距设置为 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。

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

Upper & Underline text with variable number of lines

html

css

formatting