上和下劃線的文字與線條的可變數量

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。