CODEWITHSUNDEEP
htmlcssformatting
DaneSoul
DaneSoul

Reputation: 4511

Upper & Underline text with variable number of lines

I need to work with documents templates on site and have problem with preparing templates with complex formatting of such type:

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

So that upper text is text I will add into template from forms, and subtext is text is descriptive comment. Problem is that length of lines of both texts are variable and can't be known for sure before filling and often inserted text is in more than one string.

Such variant works well for upper text and underline it, but I don't see how to add sub-text there...

<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

Upvotes: 1

Views: 1289

Answers (1)

Christopher Pearson
Christopher Pearson

Reputation: 1193

if you had short lines:

Can you use description lists? Set up the list like:

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

and style with CSS. 

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

dd {
    margin-left:0;
}

see this fiddle

For longer lines:

you could use absolute positioning of divs combined with line heights of 2. you basically set the line spacing of both divs at 2 and then position the lower div 1em below the top one. HTML code would be like:

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

and then the 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;
}

See this fiddle.

Upvotes: 2

Related Questions