CODEWITHSUNDEEP
htmlcss
Andrew
Andrew

Reputation: 5203

How to underline blank space in CSS?

I am making a report that should be printable from the web browser. At the bottom is a field for the recipient to fill in, so it's underlined. I would rather not have to eyeball a certain number of underscores, and they seem to have gaps in them anyway.

What I am going for is...

Amount Paid: $ ___________________

So far, I have managed this CSS:

<div>
    <p style="border-bottom: 1px solid black;">
        Amount Paid: $ 
    </p>
</div>

That draws a line to the edge of the parent div - which I want. However, it also draws a line under "Amount Paid: $", which I don't want. Every combination of ps, spans, etc. I've thought of has failed:

If I put the text in a span that nukes the border, it doesn't matter, I suppose since it's still part of the p and the border is still drawn.

I can add the underline to a span after text, but that doesn't work. It only seems to want to underline the blank space when the border style is in the p element.

Likewise, if I replace the p with a span it doesn't get the memo that it should extend the border all the way:

<p>
    <span>Amount Paid: $ </span>
    <span style="border-bottom: 1px solid black;"> </span>
</p>

Does nothing. The line is never drawn. If I add a letter to the second span, it's drawn under that, but no more. And if I replace the p with anything else like divs or spans, it doesn't seem to work either...

Any ideas? Thanks in advance.

Upvotes: 19

Views: 47942

Answers (6)

Artur M&#252;ller Romanov
Artur M&#252;ller Romanov

Reputation: 5791

Or just add non-breaking space characters like so:

<h1>STRONG&#160;&#160;&#160;</h1>

css:

h1 {
  text-decoration: underline;
}

add as many as you like to increase width of your underline.

Upvotes: 0

Mike Grove aka Theophilus
Mike Grove aka Theophilus

Reputation: 1255

This works in the year 2014.

Amount Paid: $ <span style="text-decoration: underline; white-space: pre;">                   </span>

Upvotes: 15

Lyubomyr Shaydariv
Lyubomyr Shaydariv

Reputation: 21115

Change the display (CSS) of the second span to inline-block and set its width (CSS).

upd:

Or try something like:

<p style="width: 200px; display: table;">
  <span style="display: table-cell; width: 100px;">Amount Paid: $ </span>
  <span style="display: table-cell; border-bottom: 1px solid black;"></span>
</p>

Upvotes: 17

Igor Alemasow
Igor Alemasow

Reputation: 4889

Another one solution using disply: flex; and flex-grow:

.container {
    width: 200px;
}

.row {
    display: flex;
}

.underline {
    flex-grow: 1;
    border-bottom: 1px solid black;
    margin-left: 5px;
}
<div class='container'>
    <div class='row'>
        <div class='label'>Count:</div>
        <div class='underline'></div>
    </div>
    <div class='row'>
        <div class='label'>Amount Paid:</div>
        <div class='underline'></div>
    </div>
</div>

Upvotes: 6

TheQ
TheQ

Reputation: 516

If you're not worried about support for older browsers (IE6 generation), there's always using the min-width property to get a default amount of blank space that expands as necessary.

<p>
    <span>Amount Paid: $ </span>
    <span style="border-bottom: 1px solid black; min-width: 100px;"> </span>
</p>

Note that for IE7, you'd have to add an overflow: visible to the min-width element so that it treats min-width properly, as opposed to it's default (buggy) behavior of treating it as width.

Upvotes: 3

thirtydot
thirtydot

Reputation: 228182

If you don't mind manually specifying the width of the line, you can do this:

<span style="border-bottom: 1px solid black; padding-left: 50px">&nbsp;</span>

Upvotes: 5

Related Questions