Get the underline to extend out past the text

In a table, the td tag contains a dynamic text which is underlined so I used the following -

<td width="50%" align= "left">
  <span style="font-size:8px;font-weight:bold;">
    <em style="text-decoration: underline;">{TERMINAL}</em><br />
    (HOME OPERATING CENTER AND ADDRESS)
  </span>
</td>

but How do I get the underline to extend out past the text, like till the length of the text (HOME OPERATING CENTER AND ADDRESS)??

NOTE:

I can use &nbsp; multiple times to make it equal to the text length but it looks ugly and because my text {TERMINAL} length is not fixed so using   can not work to match the length of second text.

Answers


I've cleaned up the code a bit and replaced your

<em> with <p>

Fiddle Here

Explanation: A paragraph's default width is 100% of its container. By using the border-bottom styling, you'll have way more control over how the "underline" looks in terms of color, thickness, etc...

Removing the span was just a kneejerk reaction, but I suppose there could have a been a "good" reason for it. Adding it back and taking the style off the table cell won't affect the underline solution. ;)


You can fake the underline with an < hr >:

http://jsfiddle.net/ntwiles/5vKuR/4/

<table>
    <tr>
        <td>
            <em>{TERMINAL}</em><hr id='underline' /><br />
            (HOME OPERATING CENTER AND ADDRESS)
        </td>
    </tr>
</table>

#underline
{
    margin-top:0;
    margin-left:0;
    width:100%;
}

Together with the above solutions you have several options, two of them I placed in this JSFiddle:

  1. Use line-height and text-decoration:overline on the lower text:

    Advantage: The underlining doesn't fill the complete table cell but only the actual text in question

    Disadvantage: Very fragile. Will break, when the line-height doesn't match to bring under- and overlining to match, or when one of both texts starts to extend on more than one line.

  2. Use display:block: This is basically the same as @Frankenscarf's answer. It just doesn't need markup change, but if that's no concern, I'd go with his answer and change the tag.


In this code also try

<body>
<td width="50%" align= "left">
  <span style="font-size:8px;font-weight:bold;">
    <em style="text-decoration: underline;">{TERMINAL}</em><br />
<p style="text-decoration:underline" >   (HOME OPERATING CENTER AND ADDRESS)</p>
  </span>
</td>
</body>

Need Your Help

Flex ComboBox items go out of alignment

flex image combobox alignment

I have a combobox that uses a custom itemrenderer to display an image. when scrolling up and down the list the images randomly go out of alignment. How do I stop this?

How to check if a given user is a member of the built-in Administrators group?

.net security

I need to check programmatically (in .NET) whether a given user (domain account) is a member of the built-in Administrators group on a current computer (the one where the application gets executed)...