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。

上部＆amp;带有可变行数的下划线文本

1 个答案: