上和下划线的文字与线条的可变数量

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 

所以这上面文字是文字，我会添加从表格转化为模板，而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 s的线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。